为每个<div>独立运行一个 Jquery 脚本

Question

我有以下问题：

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

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

如果我想让它们同时以不同的方式操作，我可以在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>

如果你们中有人知道解决这个问题的办法，那就太酷了！

谢谢，马里奥。

编辑：

这里的脚本：

$(document).ready(function()
{
    //checks if page is completely loaded
    slideshow();
});

function slideshow()
{
    //Sets all pictures opacity to 0
    $('#galleria a').css({opacity:0.0});
    //Sets the first picture's opacity to 1
    $('#galleria a:first').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()
{
    //If no image hast the class 'show', takes the first picture
    var current = ($('#galleria a.show')? $('#galleria a.show') : $('#galleria a:first'));
    //Get next image, if reached the end of slideshow, starts from the begining
    var next = ((current.next().length == 0) ? $('#galleria a:first') : current.next()); 
    //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
    current.animate({opacity: 0.0},1000)
        .removeClass('show');
}

->到目前为止，两者都使用了相同的id="galleria"。(已经在上面的html中更改了这一点(

谢谢你到目前为止的回答！

Answer 1

给<div>元素一个"类"，并让脚本将自己应用于该类的所有元素。

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

然后在脚本中：

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

您没有发布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"实例上进行操作。

Answer 2

另一种方法是使用多ID选择器：$("#galleria1,#galleria2").Slider();