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でをクリックすると、 （quote1,2,3）#quotesが交互に表示されますが、私が持っているものは機能していません。<p>.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');
        });
    });

完璧に動作しますありがとうDavidThomas

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 に答える