1

比較的単純であるべきだと思うものを見つけようとして、本当に苦労しています。

次のクラス (div.content) を取得する必要があります。これは DOM のどこかに表示される可能性があります。

以下は、私が持っているものを表す簡略化されたマークアップです。 

<div class="container">
  <div class="content">
    Example content #1    <a href="#" class="next">Next</a>
  </div>

  <div class="content">
    Example content #2    <a href="#" class="next">Next</a>
  </div>
</div>

<div class="container">
  <div class="content">
    Example content #1    <a href="#" class="next">Next</a>
  </div>

  <div class="content">
    Example content #2    <a href="#" class="next">Next</a>
  </div>
</div>

content特定の作品内の次のdiv を表示すると、 a の最後のdivからnextの最初containerの divに移動しようとすると問題が発生します。 contentcontainer contentcontainer

いくつかの重要なポイント:-

  • デフォルトでは、最初の div のみ が表示され、残りは非表示になっていますが、たとえば 4 番目の 2 番目のdivが表示されてcontentいる場合に機能するソリューションが必要です。contentcontainer

  • content表示されるのは 1 つの divだけです。

これまでに思いついた唯一の解決策は、機能しますが、非常に面倒に思えます。

$('.next').click(function() {
    $theContent = $(this).parent('.content');
    $theContent.hide();

    if ($theContent.next('.content').length) {
        $theContent.next('.content').show();
    } else if ($theContent.parent('.container').next('.container')
        .children('.content').length
    ) {
        $theContent.parent('.container').next('.container')
            .children('.content:first').show();
    } else {
        // reached the end or something went wrong
    }
});

これの主な欠点は、上記の DOM 構造に依存していることです。DOM のどこに表示されても、特定のクラスを持つ次の要素を選択するためのメソッドが存在すると確信していました。

理想的には、特定の DOM 構造に依存しないソリューションが必要です。それが不可能な場合は、代替ソリューションが役立ちます!

上記の例のフィドルは次のとおりです

長々と質問すみません！

4

4 に答える 4

2 
jQuery(function() {
    var i = 1;
    jQuery('.content').each(function() {
        jQuery(this).addClass('content-' + i);
        i++;

        jQuery(this).find('a.next').bind('click', function() {
            toggleContentDivs(jQuery(this).parent());
        }); 
    });
});

function toggleContentDivs(oContentDiv)
{
    var nextVisible   = false,
        setVisibility = false;

    jQuery('.content').each(function() {
        if (oContentDiv.attr('class') == jQuery(this).attr('class')) {
            nextVisible = true;
            jQuery(this).hide();
        } else if (nextVisible == true) {
            jQuery(this).show();
            nextVisible   = false;
            setVisibility = true;
        } else {
            jQuery(this).hide();
        }
    });
    // it must have been the last .content element
    if (setVisibility == false) { 
        jQuery('.content:first').show();
    }
}

既存のコードとの DOM 依存関係のみ、a.next は .content の直接の子でなければなりません。

ここでのjsFiddleの例

于 2012-10-11T22:24:55.467 に答える
2

これは実際には非常に単純な作業であることがわかります。セレクターを jQuery のindex()メソッドに渡すことで、現在の要素のインデックスをそのコレクションに相対的に取得できます。

var idx = $theContent.index('div.content') + 1;

次に、contentdiv を直接ターゲットにすることができます。

$('div.content').eq(idx).show();
于 2013-04-10T14:35:53.597 に答える
1

それを書くためのより簡単な（冗長ではない）方法は、関数の引数を差し引いた方法とまったく同じであることがわかります：

$theContent.parent().next().length

編集2：

私はすべてのソリューションを広範囲に試しましたが、それらには欠陥がありました. 要するに、あなたはそれを行う最も簡単な方法を持っていると思います。おそらくjQueryの専門家がこれに参加して、より良い方法を示すことができない限り.

これが私の最後の提案です：

$('.next').click(function() {
    $theContent = $(this).parent('.content');
    $theContent.hide(10, function() {
        if (!$theContent.next('.content').length) {
            $theContent.parent('.container').next()
                .find('.content:first').show();
        } else {
            $theContent.next('.content').show();
        }
    });
});

理想的な解決策は を使用することclosest()ですが、問題は、コンテナーによって分離されているために、期待どおりに動作しないことです。jQuery の例では、順序付けられていないリストを使用しています。ええ、これははるかに簡単です。なぜなら、ノードの種類 ( livsulなど) を区別して、単に doを実行できるからです.next('li')。ここではすべてdivs を使用しています。そして、最初のコンテナの最後に到達すると、何らかの理由.closest('.content')で機能しません!

于 2012-10-11T20:57:35.603 に答える
-1

これはどう：

if ($theContent.next('.content').length) {
   $theContent.next('.content').show();
} else if ($theContent.parent('.container').next('.container').children('.content').length) {
   $theContent.parent('.container').next('.container').children('.content:first').show();
} else {
   $('.content:first').show();
   //alert('Reached the end or something went wrong!');
}

JSFIDDLE

于 2012-10-11T20:40:59.517 に答える