Javascript 分别为每个<；运行一个Jquery脚本；部门>；

我有以下问题：

我正在编写一个JQuery脚本，它将一些HTML转换为“滑块”。到目前为止没有问题，一切都很顺利

问题是，如果我想同时运行两个或多个“滑块”，它们的“动作”当然是一样的

如果我想让它们同时执行不同的操作，我可以在HTML代码中多次“添加”脚本（，还是必须向脚本添加“.each（）”函数

HTML代码：

<div id="galleria1" interval="1000">
            <a href="#" class="show" >
                <img width="640" height="450" rel="Slider-Image"src="a.jpg" />
            </a>
            ...
</div>

<div id="galleria2" interval="1000">
            <a href="#" class="show" >
                <img width="640" height="450" rel="Slider-Image"src="b.jpg" />
            </a>
            ...
</div>

->到目前为止，两者使用了相同的id=“galleria”。（已在上面的html中对此进行了更改）

感谢您迄今为止的回答！

给您的

元素一个“类”，并让脚本将自身应用于该类的所有元素

<div id="galleria2" class='galleria' interval="1000">

您没有发布JavaScript代码，因此实际情况可能有点不同

编辑-好，现在代码已经发布，我将按如下方式重新构造它：

$(document).ready(function() {
  $('.galleria').each(function() {
    var $galleria = $(this), $anchors = $galleria.find('a'), current = 0;

    function slideshow() {
      //Sets all pictures opacity to 0
      $anchor.css({opacity:0.0});
      //Sets the first picture's opacity to 1
      $anchors.eq(0).css({opacity:1.0});
      //Calls the gallery() function to run the slideshow, number gives time till next 'slide' im milliseconds
      setInterval(nextPicture, 1000);
    }

    function nextPicture() {
      var $prev = $anchors.eq(current);

      //If no image hast the class 'show', takes the first picture
      current = (current + 1) % $anchors.length;

      //Get next image, if reached the end of slideshow, starts from the begining
      var next = $anchors.eq(current);

      //Runs Animation and makes next picture visible, number gives fade in time
      next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);

      //Hides last picture
      $prev.animate({opacity: 0.0},1000)
        .removeClass('show');
    }

    slideshow();
});

---

通过将函数嵌套在“.each（）”迭代器中，它们将对自己分配的“galleria”实例进行操作。

另一种方法是使用多ID选择器：

$（“#galleria 1，#galleria 2”）.Slider（）；

如果您也发布JavaScript代码，则可能给出更具体的答案。

$（“#galleria1，#galleria2”）。每个（函数（i）{/*您是否使用$（this）*/}

？？？或者我不明白你的意思？我认为你的代码可以以一种更好地支持你所需要的灵活性的方式来构造。我会在一秒钟内编辑我的答案。也只是作为参考，看看jQuery选择器的文档。如果我使用类而不是id，我不会再有一个确切的问题，那就是它们都做相同的事情吗？好吧既然代码已经发布了，就让我看看吧。

$('div.galleria').each(function() {
  // whatever
});

$(document).ready(function() {
  $('.galleria').each(function() {
    var $galleria = $(this), $anchors = $galleria.find('a'), current = 0;

    function slideshow() {
      //Sets all pictures opacity to 0
      $anchor.css({opacity:0.0});
      //Sets the first picture's opacity to 1
      $anchors.eq(0).css({opacity:1.0});
      //Calls the gallery() function to run the slideshow, number gives time till next 'slide' im milliseconds
      setInterval(nextPicture, 1000);
    }

    function nextPicture() {
      var $prev = $anchors.eq(current);

      //If no image hast the class 'show', takes the first picture
      current = (current + 1) % $anchors.length;

      //Get next image, if reached the end of slideshow, starts from the begining
      var next = $anchors.eq(current);

      //Runs Animation and makes next picture visible, number gives fade in time
      next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);

      //Hides last picture
      $prev.animate({opacity: 0.0},1000)
        .removeClass('show');
    }

    slideshow();
});