Question

我在一个隐藏的盒子里有一个旋转木马。 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
            }
        }
    });

}）;

Answer 1

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

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

使用更新后的代码，我可以看到您在每次点击事件时都调用了flexisel（）方法。你应该确保只调用一次。尝试这样的事情：

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

Answer 2

关注点分离。

将初始化方法移出.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
            }
        }
    }); 
)};

编辑：为了澄清，您可以致电$("#category-slider").hide();或切换一些隐藏在您点击方法中显示它的课程。

杀死jQuery插件

2 个答案: