0

所以我想要它，所以我<p>用不同的 id 交替不同。这是我到目前为止所拥有的：

$(document).ready(function(){
    $("#quote2").hide();
    $("#quote3").hide();            
    $("#quotes").click(function(){
            if(!$("#quote1").is(":visible") && $("quote3").is(":visible")){
                $('quote3').hide();
                $("quote1").fadeIn('slow');
            }
            if(!$("quote2").is(":visible") && $("quote1").is(":visible")){
                $("quote1").hide();
                $("quote2").fadeIn('slow');
            }
            if(!$("quote3").is(":visible") && $("quote2").is(":visible")){
                $("quote2").hide();
                $("quote3").fadeIn('slow');
            }
    });
});

基本上，我想单击<div>带有 id 的#quotes，然后它会交替出现<p>(quote1,2,3) 但我所拥有的不起作用。我可以不添加 .click<div>吗？

编辑：

    $(document).ready(function(){
        $("#quotes").hide();
        $("#quote2").hide();
        $("#quote3").hide();
        $("#quotes").click(function(){
            var that = $(this),
            ps = that.find('p'),
            i = that.find('p:visible').index();
            that.find('p').hide().eq(i + 1 < ps.length ? i + 1 : 0).fadeIn('slow');
        });
    });

工作得很好，谢谢大卫托马斯

4

1 回答 1

1

我可以建议将事情（很多）简化为：

$('div').click(function(){
    var that = $(this),
        ps = that.find('p'),
        i = that.find('p:visible').index();
    that.find('p').hide().eq(i + 1 < ps.length ? i + 1 : 0).show();
});

JS 小提琴演示。

但是，此答案基于您的 HTML 标记是或类似于以下假设的假设：

<div>
    <p>Quote 1</p>
    <p>Quote 2</p>
    <p>Quote 3</p>
</div>

参考：

于 2013-03-06T17:26:09.187 回答