Question

我正在使用这个＆＃34; lightslider＆＃34;我的每个产品上的插件＆＃34;使他们成为一个gallary carosel。它有效。我有10个这样的产品需要它。

但是使用我的jquery代码，它会在每个产品上堆叠相同的代码10次。而不是每次只启动它

我尝试过使用每个函数的jquery，但我觉得我错过了什么？

我把它放在一张照片中，所以它可能更有意义 https://imgur.com/a/2Tz0c

这是插件 http://sachinchoolur.github.io/lightslider/

以下是我的代码示例。

<div class="myclass">
  <ul class="lightslider">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
  </ul>
</div>

<div class="myclass">
  <ul class="lightslider">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
  </ul>
</div>


<div class="myclass">
  <ul class="lightslider">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
  </ul>
</div>


$(document).ready(function() {
    $(".lightslider").each(function () {
        $(this).lightSlider();
   });
  });

Answer 1

$(document).ready(function() {
    $(".lightslider").lightSlider();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>

<div class="myclass">
  <ul class="lightslider">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
  </ul>
</div>

<div class="myclass">
  <ul class="lightslider">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
  </ul>
</div>


<div class="myclass">
  <ul class="lightslider">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
  </ul>
</div>

无需使用each。 .lightslider选择器将选择此类的所有ul：

$(document).ready(function() {
    $(".lightslider").lightSlider();
});

Jquery使用lightslider插件循环

1 个答案: