jquery - 有没有更简洁的方式来编写这个 jQuery？

Question

我可以把它写成一个循环吗？

$(document).ready(function(){
    $('#slideItems1').bxSlider();
    $('#slideItems2').bxSlider();
    $('#slideItems3').bxSlider();
    $('#slideItems4').bxSlider();
    $('#slideItems5').bxSlider();
});

我正在使用bxSlider并且要使用多个画廊，您需要调用滑块并将其关联到每个项目。我有时每页有 200 多个产品。

Answer 1

您可以使用属性 starts-with 选择器来选择 ID 以“slideItems”开头的所有元素：

$('[id^="slideItems"]').bxSlider();

大多数 jQuery 方法都是这种情况（大多数插件也允许这样做）。该方法适用于匹配集中的每个元素，因此不需要循环。您可以看到您正在使用的插件如何在其源代码中实现此功能（注意对 的调用each，并注意它this指的是包含匹配元素集的 jQuery 对象）：

this.each(function(){
    // make sure the element has children
    if($(this).children().length > 0){
        base.initShow();
    }
});

Answer 2

给你所有的幻灯片项目上课，然后就做$('.slideItem').bxSlider();

Answer 3

给所有元素一个类，然后使用该类选择它们。

$('.slideItems').bxSlider();

Answer 4

简短但不是最佳的重写将是（如果幻灯片项列表是固定的）

$(function(){
    $('#slideItems1, #slideItems2, #slideItems3, #slideItems4, #slideItems5').bxSlider();
});

但是我强烈建议给他们上一堂课。说slideritem和做

$(function(){
    $('.slideritem').bxSlider();
});

Answer 5

我建议为此提供类名并使用类名访问它。

//slideritem is class name which you give to all which has to slider div

$(function()
{

    $('.slideritem').bxSlider();
});