杀死jQuery插件

kill jQuery plugin

本文关键字：插件 jQuery 杀死      更新时间：2023-09-26

我在一个隐藏的盒子里有一个转盘。div显示为onclick，它初始化了工作的插件。

唯一的问题是，当我关闭盒子然后再次打开它时，它会再次初始化插件，这会给我两个旋转木马。当我关闭div时，有没有办法杀死转盘？

    // show hide dropdowns
$("#category").click(function(e){
    e.preventDefault();
    $('.style-dropdown, .brand-dropdown').hide();

  $(".category-dropdown").fadeToggle();
  $(this).toggleClass("active");
  $('a#style, a#brand').removeClass("active");
  $("#category-slider").flexisel({
        visibleItems: 6,
        animationSpeed: 1000,
        autoPlay: true,
        autoPlaySpeed: 6000,            
        pauseOnHover: true,
        enableResponsiveBreakpoints: true,
        responsiveBreakpoints: { 
            portrait: { 
                changePoint:480,
                visibleItems: 1
            }, 
            landscape: { 
                changePoint:640,
                visibleItems: 2
            },
            tablet: { 
                changePoint:768,
                visibleItems: 3
            }
        }
    });

})；

flexisel插件似乎没有像jCarousel插件那样的destroy（）方法。因此，让旋转木马自杀可能是不可能的。

但是，与其在每次打开时初始化一个新的旋转木马，为什么不在关闭时隐藏旋转木马，并在打开时再次显示相同的旋转木马呢？也许再次调用方法initializeItems（）（这是由init（）方法调用的）。

通过您更新的代码，我可以看到您在每次单击事件上都调用flexisel（）方法。你应该确保只打一次电话。试试这样的东西：

if (!carousel) {
    var carousel = $("#category-slider").flexisel({
    ...
    });
}

关注点的分离。

将初始化方法移出.click()函数。它应该在窗口加载时初始化一次（根据文档），仅此而已。显示和隐藏它所在的容器是所有必要的。如果滑块不在框中，请在单击事件期间也将该元素作为目标。

$("#category").click(function(e){
    e.preventDefault();
    $('.style-dropdown, .brand-dropdown').hide();

    $(".category-dropdown").fadeToggle();
    $(this).toggleClass("active");
    $('a#style, a#brand').removeClass("active");
});
$(window).load(function() {
    $("#category-slider").flexisel({
        visibleItems: 6,
        animationSpeed: 1000,
        autoPlay: true,
        autoPlaySpeed: 6000,            
        pauseOnHover: true,
        enableResponsiveBreakpoints: true,
        responsiveBreakpoints: { 
            portrait: { 
                changePoint:480,
                visibleItems: 1
            }, 
            landscape: { 
                changePoint:640,
                visibleItems: 2
            },
            tablet: { 
                changePoint:768,
                visibleItems: 3
            }
        }
    }); 
)};

EDIT：为了澄清这一点，您可以调用$("#category-slider").hide();或切换一些将在单击方法中隐藏并显示它的类。

相关文章：