javascript - 根据单击的链接标题显示/隐藏元素？

Question

我试图根据 jquery 中超链接的 title 显示和隐藏元素 (DIV)。

我的 html 看起来像这样:

<a title="booz" href="" class="netro">booz</a>
<a title="books" href="" class="netro">books</a>
<a title="sam" href="" class="netro">sam</a>


<div data-title="booz" class="drag">something here</div>
<div data-title="booz" class="drag">something here</div>
<div data-title="booz" class="drag">something here</div>
<div data-title="booz" class="drag">something here</div>
<div data-title="booz" class="drag">something here</div>



 <div data-title="sam" class="drag">another thing here</div>
 <div data-title="sam" class="drag">another thing here</div>
 <div data-title="sam" class="drag">another thing here</div>

<div data-title="books" class="drag">oh well</div>
<div data-title="books" class="drag">oh well</div>
<div data-title="books" class="drag">oh well</div>

这是 jquery 代码:

 $('.netro').click(function(event) {
  var title = $(this).attr('title');
  var allElems = $('"' + title + '"').not(this);

  allElems.show();
});

但是，我的代码根本没有执行任何操作。

有人可以就这个问题提出建议吗？

我必须补充一点，所有具有 drag 类的 div 都具有 display:none; 的 CSS。

Answer 1

您需要使用类和属性选择器

$('.netro').click(function (event) {
    var title = $(this).attr('title');
    var $curr = $('.drag[data-title="' + title + '"]').toggle();
    $('.drag').not($curr).hide();
    event.preventDefault()
});

演示:Fiddle