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

Answer 2

有三个问题。第一个是选择器是"title"，它应该是[data-title="title"]第二个是你在使用show时已经显示了元素，以修复此使用toggle就是这样，切换可见性。最后，链接有一个空的href，它试图导航页面，而不是使用href="#"

所以基本上看起来应该是这样的：

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

在jsfiddle

上查看

Answer 3

问题

首先，编译器不知道"title"引用了什么，因此您需要使用属性选择器。接下来是它有href，这意味着页面将导航。

解决方案

导航问题很简单，添加e.preventDefault()。要解决隐藏/显示问题，我们使用属性选择器，使用$('[data-title='+title+']')

代码

$('.netro').click(function (e) {  
    e.preventDefault(); /* Prevents page changing */
    var title = $(this).attr('title');
    $('.drag').hide(); /* Hides other elements */
    $('[data-title='+title+']').show(); /* Shows the correct ones */
});

SAMPLE

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

3 个答案:

问题

解决方案

代码