多组“nextPage”

Question

首先，对于大多数人来说，我是网络编码的新手，或多或少只是在我有空闲时间自学...所以如果我没有意义，我会道歉。

我基本上有一个简单的JavaScript，允许我有一个prev和下一个按钮来移动多个图像。但是我想拥有这些“画廊”中的多个，但在我的情况下，它们互相交互。我试图包含每个部分（图库，小文本框和两个按钮），但我没有运气。

如果您按照我的链接进行操作，您可以看到我的问题...根据屏幕的大小，您可能只能看到一个图库，但您可以看到每组按钮都会影响每个图库..这也是出于某种原因将“空白”图像添加到图像库列表中。

http://robinwkurtz.com/slider/issue.html

先谢谢！

这是我的源代码

<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();        
    });

}）;

Answer 1

您有多个具有相同ID #container的元素。只有一个元素可以拥有ID。如果你想将它赋予多个元素，请将它设为一个类。

现在，当您选择pages时，您将选择所有这些。

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

那会选择#container里面的每一个li和ol（它会是每个容器，但它是一个ID，所以这也会导致你的问题）。

您知道使用$(this)点击了哪个按钮，因此您可以使用.parent()上移DOM并查找包含该按钮和一组页面的容器，并且只选择该页面。