WordPress不能正确执行jquery代码

我使用谷歌地图api和旋转木马系统有一个很好的位置列表。

本地脚本工作完美，没有任何问题。

我目前正在使用： https ： //github.com/haripaddu/jQuery-Vertical-Carousel

首先，当集成代码时，函数将无法工作，我在其他post上看到解决方案是将它包装起来，因此它就是我所做的，但脚本仍然不起作用。

什么不起作用的事实是，即使我有10 li旋转木马没有启动它只显示我所有的li 。

编辑：从iv’e测试我认为发生的是jQuery包装不允许$.fn正常工作，因为它永远不会返回$(".recentArticles") ，但总是完整的DOM元素。

我试过了：

 jQuery(document).ready(function(){ /*my code*/ }); 

也：

 jQuery(document).ready(function($){ /*my code*/ }); 

我还必须包裹这条线：

  var currentItemOffset = $("> :nth-child(" + currentItem + ")", carouselGroup).offset(); 

像这样：

 var currentItemOffset = jQuery(function($) {$("> :nth-child(" + currentItem + ")", carouselGroup).offset();}); 

否则我会收到错误。

在我的functions.php中，我还确保在排队我的javascript时包含jQuery：

 wp_enqueue_script( 'verticalCarousel', get_template_directory_uri() . '/js/jQuery.verticalCarousel.js', array( 'jquery' ), '5.0.9', false ); 

然而，即使有了这一切仍然不起作用没有动画，它显示所有事件，即使我有4。

HTML：

 
 
 
  
 
 
Header 1
address
 
[phone]
 
 
Header 2
address
 
[phone]
 
 
Header 3
address
 
[phone]
 
 
Header 4
address
 
[phone]
 
 
 
  
 
  

JavaScript的：

 jQuery(document).ready(function($){ $.fn.verticalCarousel = function(myoptions) { var carouselContainerClass = "vc_container"; var carouselGroupClass = "vc_list"; var carouselGoUpClass = "ca_goUp"; var carouselGoDownClass = "ca_goDown"; var options = myoptions; var carouselContainer; var carouselGroup; var carouselUp; var carouselDown; var totalItems; var setContainerHeight = (function(){ var containerHeight = 0; var marginTop = 0; if (options.showItems == 1){ containerHeight = $("> :nth-child(" + currentItem + ")", carouselGroup).outerHeight(true); } else{ for (i = 1; i  :nth-child(" + i + ")", carouselGroup).outerHeight(true); } } var nextItem = options.showItems + currentItem; marginTop = $("> :nth-child(" + nextItem + ")", carouselGroup).css("marginTop"); containerHeight = containerHeight - parseInt(marginTop); $(carouselContainer).css("height", containerHeight); }); var setOffset = (function(){ var currentItemOffset = jQuery(function($) {$("> :nth-child(" + currentItem + ")", carouselGroup).offset();}); console.log(currentItemOffset); var carouselGroupOffset = $(carouselGroup).offset(); var offsetDiff = carouselGroupOffset.top - currentItemOffset.top; $(carouselGroup).css({ "-ms-transform": "translateY(" + offsetDiff + "px)", "-webkit-transform": "translateY(" + offsetDiff + "px)", "transform": "translateY(" + offsetDiff + "px)" }) }); var updateNavigation = (function(direction){ console.log(currentItem); if (currentItem == 1){ $(carouselUp).addClass("isDisabled"); } else if (currentItem > 1){ $(carouselUp).removeClass("isDisabled"); } if(currentItem == totalItems || currentItem + options.showItems > totalItems){ $(carouselDown).addClass("isDisabled"); } else if (currentItem < totalItems){ $(carouselDown).removeClass("isDisabled"); } }); var moveCarousel = (function(direction){ if (direction == "up"){ currentItem = currentItem - 1; } if (direction == "down"){ currentItem = currentItem + 1; } updateNavigation(); setContainerHeight(); setOffset(); }); return this.each(function() { $(this).find("." + carouselGroupClass).wrap('
'); carouselContainer = $(this).find("." + carouselContainerClass); carouselGroup = $(this).find("." + carouselGroupClass); carouselUp = $(this).find("." + carouselGoUpClass); carouselDown = $(this).find("." + carouselGoDownClass); totalItems = $(carouselGroup).children().length; updateNavigation() setContainerHeight(); setOffset(); $(carouselUp).on("click", function(e){ if (currentItem > 1){ moveCarousel("up"); } e.preventDefault(); }); $(carouselDown).on("click", function(e){ if (currentItem + options.showItems <= totalItems){ moveCarousel("down"); } e.preventDefault(); }); }); }; }); jQuery(document).ready(function($){ $(".recentArticles").verticalCarousel({ currentItem: 1, showItems: 2, }); });