Javascript 多套「；“下一页”；s

首先，对大多数人来说，我对网络编码是新手，当我有空的时候，我或多或少只是在自学。。。所以，如果我没有什么道理，我道歉

我基本上有一个简单的javascript，它允许我有一个prev和next按钮来移动多个图像。然而，我想拥有多套这样的“画廊”，但在我的例子中，它们相互作用。我试图包含每个部分（图库、小文本框和两个按钮），但没有成功

如果你按照我的链接贝娄你可以看到我的问题。。。根据屏幕的大小，您可能只能看到一个多媒体资料，但您可以看到每套按钮都会影响每个多媒体资料。。出于某种原因，这也会将“空白”图像添加到图像库列表中

提前感谢

这是我的源代码

<div class="section black" id="top_ten">       
<div id="title"><h1>TOP TEN</h1></div>          
<div id="image">
    <div class="container">
        <ol>
            <li><img src="images/project5_1.jpg"></li>
            <li><img src="images/project5_2.jpg"></li>
            <li><img src="images/project5_3.jpg"></li>
        </ol>
      <div id="contentfooter">
        <div id="footer">A publication and poster, which teaches guide lines to technical constraints. With any design job there comes rules and guidelines to follow in order to put out a proper project.</div>
            <span class="button prevButton">&#8211;</span>
            <span  class="button nextButton">+</span>
 </div>
 </div>
 </div>
 </div>

前十名



一种出版物和海报，教授技术约束的指导原则。在任何设计工作中，都会有一些规则和指导方针需要遵循，以便完成一个合适的项目。
–
+

这是我的js

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
$(window).load(function(){
    var pages = $('.container ol li'), current=0;
    var currentPage,nextPage;

    $('.button').click(function(){
        currentPage= pages.eq(current);
        if($(this).hasClass('prevButton'))
        {

            if (current <= 0)
                current=pages.length-1;
            else
                current=current-1;
        }
        else
        {
            if (current >= pages.length-1)
                current=0;
            else
                current=current+1;
        }
        nextPage = pages.eq(current);   
        currentPage.hide(); 
        nextPage.show();        
    });

$（窗口）。加载（函数（）{
变量页=$（'.container ol li'），当前为0；
var currentPage，下一页；
$（'.button'）。单击（函数（）{
currentPage=pages.eq（当前）；
if（$（this）.hasClass（'prevButton'））
{
如果（当前=页数。长度-1）
电流=0；
其他的
电流=电流+1；
}
下一页=页数.eq（当前）；
currentPage.hide（）；
nextPage.show（）；
});

}))

---

您有多个具有相同ID的元素

#容器

。只有一个元素可以有一个ID。如果要将其指定给多个元素，请将其设置为类

现在，当您选择

页面时，您将选择所有页面

var pages = $('#container ol li')

这将选择容器内的每个li和容器内的ol（它将是每个容器，但它是一个ID，所以这也会给您带来问题）

您知道您使用
$（this）
单击了哪个按钮，因此您可以使用它进入DOM，找到包含该按钮和页面集的容器，然后只选择该按钮。
-设置一个小的问题示例，以便更容易处理。只包含足够的内容来演示问题，不要更多。对此表示抱歉，这应该更简单。感谢您的回复。我理解整节课的内容，而且我很清楚你指出了这一点！然而，我迷路的地方是如何告诉我的javascript影响所有这些类，而不用说重复整个scrpit几次。再次感谢
$（'.button'）。单击
即可。你只需要，在这里面，找出哪个按钮被点击了，只需要更改该组的图像。