javascript - 干代码 : Use JQuery to make loop for a similar properties in function attached to different classes

Question

我正在使用slick制作 slider 。然而在实现上。我意识到我需要为不同的 block 创建不同的类。除了类别不同之外，属性保持不变。我可以获得有关重构下面代码的帮助吗？不需要 ES6 的循环，只需要普通的 Vanilla JS 或 jquery 循环。我只需要重构 DRY 代码

这里是新手。提前致谢。

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
    ]

  });

});

Answer 1

你不需要循环。由于所有初始化参数都相同，您只需选择三个元素并同时对它们调用 slick() 即可:

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

另请注意上面修改后的 document.ready 处理程序的使用，它为 $ 变量提供了内部作用域，因此您可以在处理程序函数中自由使用它。