на jQuery: с большим количеством элементов показывается только нажатие на div этого якоря - PullRequest
Новая
       9

на jQuery: с большим количеством элементов показывается только нажатие на div этого якоря

3 голосов
/ 01 ноября 2009

прежде всего: простите за мой английский

У меня есть такая веб-страница 

<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'ов под названием 'item'.

У меня есть этот скрипт jquery 

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

НО, если я нажму на 'a', это покажет мне относительный 'div' для ВСЕХ предметов. Мне бы хотелось, если бы я щелкнул первый «а» первого элемента, он показывает мне первый «div» первого ТОЛЬКО элемента, а не все элементы.

вот тестовая страница текст ссылки (: O он работает только со ссылками на первый div!)

Я надеюсь, что было ясно ..

Спасибо всем

Ответы [ 2 ]

2 голосов
/ 01 ноября 2009

Если вы можете добавить атрибут класса к элементам 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
       });
    });
2 голосов
/ 01 ноября 2009

РЕДАКТИРОВАТЬ, ай! INDEX все испортил, div:eq(' + index + ') всегда искал первый, второй и третий элементы первого элемента div, попробуйте это: 

$(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's.

...