多组“nextPage”

Question

首先，对于大多数人来说，我对web编程是个新手，当我有空闲时间的时候，我或多或少只是自学……所以如果我说的没什么意义，我道歉。

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

如果你在下面点击我的链接，你可以看到我的问题…根据屏幕的大小，您可能只看到一个图库，但您可以看到每组按钮影响每个图库。出于某种原因，这也会将“空白”图像添加到图片库列表中。

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，找到包含该按钮和一组页面的容器，然后只选择该按钮。