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

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

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

我的页面上可能有“无限”数量的幻灯片，这似乎是我遇到问题的地方。（它被用在wordpress循环中，每个帖子都被编码为将帖子中的图像拉入滑块）

你可以看到我到目前为止的成果：

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

---

干杯，伙计们，我已经为此绞尽脑汁好几个小时了！我愿意使用另一个滑块，如果这有助于实现所需的结果，bxslider的文档似乎并不多。

您的第一个问题是回调函数中的参数都错了。第一个参数是指向当前幻灯片的jquery对象。然后，您将在整个页面上选择“第n个”

img

，而不是与当前幻灯片相关。使用此当前幻灯片jquery对象，您只能找到适当的图像，而不会影响所有幻灯片。试试这个：

$(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');
        }
    });
});

---

您的第一个问题是回调函数中的参数全部错误。第一个参数是指向当前幻灯片的jquery对象。然后，您将在整个页面上选择“第n个”

img

，而不是与当前幻灯片相关。使用此当前幻灯片jquery对象，您只能找到适当的图像，而不会影响所有幻灯片。试试这个：

$(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');
        }
    });
});

---

谢谢Hamza，我只是尝试了一下，但没有效果，基本上我希望当前图像完全不透明度，而滑块中的其他图像的不透明度为.7，基本上就像在顶部滑块中一样，当您在滑块中滑动时，您会看到不透明度根据当前幻灯片发生变化），但这不会传递到下面的另一个滑块。（在jsfiddle中）谢谢Hamza，只是尝试了一下，但没有效果，基本上我希望当前图像处于完全不透明度，而滑块中的其他图像的不透明度为.7，基本上，当您在顶部滑块中滑动时，可以看到不透明度根据当前幻灯片的变化），但这不会传递到下面的另一个滑块。（在JSFIDLE中）谢谢詹姆斯！这正是我想要实现的，我需要不断地用更多的jQuery弄脏我的手！再次干杯。谢谢詹姆斯！这正是我想要实现的，我需要不断地用更多的jQuery弄脏我的手！再次干杯。