javascript - Jquery - 一次向多个元素添加类？

Question

我在我的网站上遇到了 jquery 和 bxslider 的问题，我已经为此绞尽脑汁一段时间了，但似乎找不到任何方法让它按照我想要的方式工作，

我正在使用 bxslider 构建一个 slider ，基本上我希望当前幻灯片具有“事件”类或不透明度为 1，而我希望 slider 上的所有其他图像具有 0.7 的不透明度。

我的页面上可能有“无限”数量的幻灯片，这就是我遇到问题的地方。 (它在 wordpress 循环中使用，每个帖子都经过编码以将帖子中的图像拉入 slider )

您可以在以下位置查看我到目前为止的内容:http://jsfiddle.net/bu5cd/

    $(document).ready(function(){
$('.bxslider').bxSlider({
        onSlideBefore: function (currentSlideNumber, totalSlideQty,        currentSlideHtmlObject) {
    $('img.attachment-thumbnail-size').removeClass('active');
    $('img.attachment-thumbnail-size').eq(currentSlideHtmlObject+1).addClass('active')
var current = $('img.attachment-thumbnail-size').attr('id');
     }
});
    });

您可以看到它在某种程度上适用于第一个 slider ，但不适用于第二个 slider 。

干杯伙计们，我为此绞尽脑汁好几个小时了!如果可以帮助实现预期结果，我愿意使用另一个 slider ，bxslider 似乎没有太多文档。

Answer 1

您的第一个问题是您的回调函数中的参数全部错误。第一个参数是指向当前幻灯片的 jquery 对象。然后，您将在整个页面上选择“第 n 个”img，而不是与当前幻灯片相关。使用当前幻灯片 jquery 对象，您可以只找到合适的图像，而不是影响所有 slider 。试试这个:

$(document).ready(function () {
    $('.bxslider').bxSlider({
        onSlideBefore: function ($el) {

            /*  remove the class from all images of this slider only  */
            $el.closest(".bxslider")
                .find('img.attachment-thumbnail-size')
                .removeClass('active');

            /*  add the class to the image within the current slide */
            $el.find('img.attachment-thumbnail-size')
                .addClass('active');
        }
    });
});

http://jsfiddle.net/bu5cd/3/