Question

我有这个脚本

jQuery.noConflict();
(function ($) {
    $(".bww-carousel").jCarouselLite({
        btnNext: ".bww-carousel-next",
        btnPrev: ".bww-carousel-prev"
    });
    //add border to selected device
    $('a[onclick*="selectHandset"]').click(function () {
        $(".bww-carousel img").removeClass("active");
        $(this).parent().find("img").addClass("active");
    });
})
(jQuery);

在wordpress footer.php中，我需要在浏览器调整大小时重新运行jCarouselLite。

我试过了：

jQuery.noConflict();
(function ($) {
    $(".bww-carousel").jCarouselLite({
        btnNext: ".bww-carousel-next",
        btnPrev: ".bww-carousel-prev"
    });
    //add border to selected device
    $('a[onclick*="selectHandset"]').click(function () {
        $(".bww-carousel img").removeClass("active");
        $(this).parent().find("img").addClass("active");
    });
})
$(window).resize(function() {
    jCarouselLite();
});
(jQuery);

以及：

jQuery.noConflict();
(function ($) {
    $(".bww-carousel").jCarouselLite({
        btnNext: ".bww-carousel-next",
        btnPrev: ".bww-carousel-prev"
    });
    //add border to selected device
    $('a[onclick*="selectHandset"]').click(function () {
        $(".bww-carousel img").removeClass("active");
        $(this).parent().find("img").addClass("active");
    });
    $(window).resize(function() {
        jCarouselLite();
    });
})
(jQuery);

和

jQuery.noConflict();
var jCarouselLite = (function ($) {
    $(".bww-carousel").jCarouselLite({
        btnNext: ".bww-carousel-next",
        btnPrev: ".bww-carousel-prev"
    });
    //add border to selected device
    $('a[onclick*="selectHandset"]').click(function () {
        $(".bww-carousel img").removeClass("active");
        $(this).parent().find("img").addClass("active");
    });
    $(window).resize(function () {
        jCarouselLite();
    });
})
(jQuery);

到目前为止，所有尝试都失败了，继续在Chrome控制台中获取对象不是函数（匿名函数）错误。

建议？

Answer 1

function Runjcarousel(){ 
$(".bww-carousel").jCarouselLite({
    btnNext: ".bww-carousel-next",
    btnPrev: ".bww-carousel-prev"
});
//add border to selected device
$('a[onclick*="selectHandset"]').click(function () {
    $(".bww-carousel img").removeClass("active");
    $(this).parent().find("img").addClass("active");
});
}
$(document).ready(function(){
Runjcarousel();
});
//Call on window resize
$(window).resize(function() {
Runjcarousel();
});

Answer 2

在Rohit的帮助下，这里最终适合我（对于未来的读者）

jQuery.noConflict();
(function ($) {
    function Runjcarousel() {
        $(".bww-carousel").jCarouselLite({
            btnNext: ".bww-carousel-next",
            btnPrev: ".bww-carousel-prev"
        });
        //add border to selected device
        $('a[onclick*="selectHandset"]').click(function () {
            $(".bww-carousel img").removeClass("active");
            $(this).parent().find("img").addClass("active");
        });
    }
    $(document).ready(function () {
        Runjcarousel();
    });
    //Call on window scroll
    $(window).resize(function () {
        Runjcarousel();
    });
})
(jQuery);

可能有一种更短的方式来编写它，但它的行为与WordPress的jQuery版本一样，并且做了我需要它的事情，所以我很高兴。感谢Rohit的帮助！在你的帮助下不会想出来的！：）

重新调整noconflict重新运行jquery函数

2 个答案: