Question

我有一些div有另一个有id="container"的div。我想要的是从容器中的第一个div开始然后单击下一个按钮以清除div并从容器中显示第二个div的页面。

我的代码：

$(document).ready( function() 
{ 
   $("#container div").not("#container div:first").each(function(){

    $(this).addClass('hidden');

});

$("next").click(function(){
    var divWithoutHiddenClass=$("#container div").not("#container div.hidden");       

   divWithoutHiddenClass.addClass('hidden');

       if(divWithoutHiddenClass.next().html()===undefined){
           $("#container div:first").removeClass('hidden');
    }
    else{
        divWithoutHiddenClass.next().removeClass('hidden');
    }
});
});

和

<div id="container" class="thirdcanvas">

       <div id="vapor">
           <img src="images/alfabet/w.png" alt=""/>
           <img src="images/alfabet/f.png" alt=""/>
           <img src="images/alfabet/v.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/o.png" alt=""/>
           <img src="images/alfabet/r.png" alt=""/>
       </div>

       <div id="baiat">
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/aa.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/t.png" alt=""/>
       </div>     

       <div id="colac">    
           <img src="images/alfabet/g.png" alt=""/>
           <img src="images/alfabet/c.png" alt=""/>
           <img src="images/alfabet/u.png" alt=""/>
           <img src="images/alfabet/o.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/c.png" alt=""/>
       </div> 

       <div id="slapi">    
           <img src="images/alfabet/s.png" alt=""/>
           <img src="images/alfabet/ss.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
       </div>  

       <div id="umbrela">   
           <img src="images/alfabet/u.png" alt=""/>
           <img src="images/alfabet/n.png" alt=""/>
           <img src="images/alfabet/m.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/r.png" alt=""/>
           <img src="images/alfabet/e.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
       </div>  
   </div>

<a href="#" onClick="nextImage()"><img id="next" src="images/nextBtn.png" title="Continuare" /></a>

Answer 1

除了点击执行更改$('next')到$('#next')删除标记上的onclick arrgument并添加id="next"之外，

everytihng看起来很好。如果您不希望浏览器窗口继续单击，您还可以使用单击http://api.jquery.com/event.preventdefault/

上的防止默认值

如果你要添加jsfiddle的更多信息：）

编辑：因为你添加了jsfiddle我给出了答案。 http://jsfiddle.net/rQb5e/16/

Answer 2

在这一行$("next").click(function(){ 你错过了img的id之前的尖锐（“＃”）。此外，我不确定这是你的所有JS代码，但你会看到错误，函数“nextImage（）”没有定义。

我建议你使用show（）和hide（）而不是类来使用jQuery函数。我改变你的js代码并且工作是：

$(document).ready( function() { 
           $("#container div").not(":first").each(function(){
            $(this).hide();
        });

        $("#next").click(function(){
            var divWithoutHiddenClass=$("#container div").not(":hidden"); 
            divWithoutHiddenClass.hide();
            if (divWithoutHiddenClass.next().html() === undefined){
                $("#container div:first").show();
            }
            else{
                divWithoutHiddenClass.next().show();
            }
        });
    });

编辑：小提琴中的例子：http://jsfiddle.net/8Erxa/

Answer 3

我在jsbin上做了一个例子，希望这会有所帮助。不知道你的意思是什么，在我的例子中“清楚”它是randoms，当到达最后<div>时，它从第一个开始。

幻灯片divs javascript

3 个答案: