Javascript 干式代码：使用JQuery对附加到不同类的函数中的类似属性进行循环

我用它来做滑块。然而，关于执行问题。我意识到我需要为不同的街区制作不同的课程。除了不同的类之外，属性保持不变。我可以得到重构下面代码的帮助吗。一个不需要ES6的循环，只需要普通的JS或jquery循环。我只需要为枯燥的代码进行重构

我是新手。提前谢谢

jQuery(document).ready(function(){
  jQuery( '.mps-carousel' ).slick({
    accessibility: true,
    autoplay: true,
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 7,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]

  });

  jQuery('.uganda-carousel').slick({
    accessibility: true,
    autoplay: true,
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 7,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]

  });

  jQuery('.kenya-carousel').slick({
    accessibility: true,
    autoplay: true,
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 7,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]

  });

});

---

你不需要一个循环。由于所有初始化参数都相同，您只需选择这三个元素并同时对其调用

slick（）

：

jQuery(function($){
  $('.mps-carousel, .uganda-carousel, .kenya-carousel').slick({
    // your options...
  });
});

---

还要注意上面修改的document.ready处理程序的使用，它为

$

变量提供了一个内部作用域，因此您可以在处理程序函数中自由使用它。

您不需要循环。由于所有初始化参数都相同，您只需选择这三个元素并同时对其调用

slick（）

：

jQuery(function($){
  $('.mps-carousel, .uganda-carousel, .kenya-carousel').slick({
    // your options...
  });
});

---

还要注意上面修改的document.ready处理程序的使用，它为

$

变量提供了一个内部作用域，因此您可以在处理程序函数中自由使用它。

另一种方法是，在一个新类上提供您想要使用的任何元素，如

.slick carousel

。然后使用：

jQuery（函数（$）{
$（'.slick carousel'）。每个（函数（）{
美元（这个）({
//…选项
});
});
});
另一种选择是，在一个新类上提供您想要使用的任何元素，如
.slick carousel
。然后使用：


jQuery（函数（$）{
$（'.slick carousel'）。每个（函数（）{
美元（这个）({
//…选项
});
});
});

使用即
jQuery（'.mps carousel，.乌干达carousel'）.slick（{……}）
使用即
jQuery（'.mps carousel，.乌干达carousel'）.slick（{……}）
谢谢。我在括号里出错了。详情如下。议员转盘'，'乌干达旋转木马'，'肯尼亚-旋转木马'也有实现作为插件，但这可能有点先进。不过值得一提。@omukiguy没问题，很乐意帮忙谢谢。我在括号里出错了。详情如下。mps旋转木马'，'乌干达旋转木马'，'肯尼亚旋转木马'也可以作为插件实现，但这可能有点先进。不过值得一提。@omukiguy没问题，很高兴能帮助NICE重构！很好的重构！