Wordpress没有正确执行jquery代码

Question

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

本地脚本运行完美，没有任何问题。

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

首先在整合代码时，功能不起作用，我在其他帖子上看到解决方案是将它包装起来，因此它是我所做的，但脚本仍然无法工作。< / p>

有什么不起作用的事实是即使我有10 li轮播也没有启动它，只显示我的所有li。

编辑：从iv测试我认为发生的事情是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：

<div class="sidebarLocation">
    <div class="recentArticles">
        <div class="recentArticlesHeader">
            <a href="#" class="ca_goUp"><i class="fas fa-chevron-up"></i></a>
        </div>
            <ul id="sidebarLocation" class="recentArticlesGroup vc_list sidebarLocationUl" style="">
                <li id="0"><a href="javascript:zoomIn(0,6,'Header 1')" class="card"><img src="lopburi.jpg"><div class="cardContent"><h4>Header 1</h4><p></p><p>address</p>
<p></p><p></p><p>+603 3333 3333</p>
<p></p></div></a></li>
                <li id="1"><a href="javascript:zoomIn(1,6,'Header 2')" class="card"><img src="bangi.jpg"><div class="cardContent"><h4>Header 2</h4><p></p><p>address</p>
<p></p><p></p><p>+603 3333 3333</p>
<p></p></div></a></li>
                <li id="2"><a href="javascript:zoomIn(2,6,'Header 3')" class="card"><img src="portklang.jpg"><div class="cardContent"><h4>Header 3</h4><p></p><p>address</p>
<p></p><p></p><p>+603 3333 3333</p>
<p></p></div></a></li>
                <li id="3"><a href="javascript:zoomIn(3,6,'Header 4')" class="card"><img src="factory.jpg"><div class="cardContent"><h4>Header 4</h4><p></p><p>address</p>
<p></p><p></p><p>+603 3333 3333</p>
<p></p></div></a></li>
            </ul>
        <div class="recentArticlesFooter">
            <a href="#" class="ca_goDown"><i class="fas fa-chevron-down"></i></a>
        </div>
    </div>
</div>

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 <= options.showItems; i++) {
                    containerHeight = containerHeight + $("> :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('<div class="' + carouselContainerClass + '"></div>');
            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,
        });
 });