3

まず第一に：私の英語でごめんなさい

私はこのようなウェブページを持っています

<div class="item"><div class="details">
<ul>
<li><a href="#">Show div 1</a></li>
<li><a href="#">Show div 2</a></li>
<li><a href="#">Show div 3</a></li>
</ul>
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>           </div></div>

重要: 「アイテム」と呼ばれるいくつかの div があります。

私はこのjqueryスクリプトを持っています

$(document).ready(function() {
  $('ul > li > a').each(function(index) {
  $(this).click(function() {
  $('.details > div:eq(' + index + ')').toggle()
  .siblings('.details > div').hide();
  });
  });
});

しかし、「a」をクリックすると、すべてのアイテムの相対的な「div」が表示されます。最初の要素の最初の「a」をクリックすると、すべてのアイテムではなく、最初のアイテムのみの最初の「div」が表示されます。

これはテストページのリンクテキストです (:O 最初の div のリンクでのみ機能します!)

私は明確であることを願っています..

皆さんありがとう

4

2 に答える 2

2

クラス属性をdivとリンクに追加できる場合。

<div class="item"><div class="details">
<ul>
<li><a href="#" id="div1">Show div 1</a></li>
<li><a href="#" id="div2">Show div 2</a></li>
<li><a href="#" id="div3">Show div 3</a></li>
</ul>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div3">div 3</div>           </div></div>

次に、jQuery は次のように単純になります。

$(document).ready(function() {
  $('ul > li > a').click(function(){
          $('#details > div').hide(); // hide all of the divs
          $('div.' + this.id).show(); // then show the one with the same class as the link.id that was clicked
       });
    });
于 2009-11-01T13:26:04.967 に答える
2

編集、ああ！INDEXはそれを台無しにしていて、div:eq(' + index + ')常に最初のアイテムdivの最初、2番目、3番目の要素を探していました。これを試してください:

$(document).ready(function() {
  $('ul > li > a').each(function(index) {
    $(this).click(function() {
        $(this).closest('.item').siblings().find('.details > div').hide();
        $('.item .details div:eq(' + index + ')').toggle();
    });
  });
});

そして、@Dave Beer のような、より単純なソリューションを組み込むようにしてください。

于 2009-11-01T12:59:54.130 に答える