javascript - 使用 jquery 按类隐藏同一父级中的元素

Question

采用以下html:

<div class="box">
<a href="javascript:;" onclick="toggle_content(1)">Toggle</a>
<h2>Some Title</h2>
<div class="box_content box_content_1"></div>
<div class="box_content box_content_2"></div>
</div>

<div class="box">
<a href="javascript:;" onclick="toggle_content(1)">Toggle</a>
<h2>Some Title</h2>
<div class="box_content box_content_1"></div>
<div class="box_content box_content_2"></div>
</div>

<script>
function toggle_content(key){
   $('.box_content_'+key,$(this).parent()).toggle();
}
</script>

基本上，当单击切换链接时，我希望切换具有匹配类名的同一父元素中的元素。上面的代码似乎没有做任何事情。

Answer 1

$(this).parent() 并不是指您认为的那样。在这种情况下，this 是什么？窗口。

以下将起作用:

$('.box_content_'+key,".box").toggle();

不过，我会这样做:

HTML

<a href="#" class="toggle" data-toggle-id="1">Toggle</a>

jQuery

$(".toggle").click(function() {
  var key = $(this).data("toggle-id");
  console.log(key);
  $('.box_content_'+key, $(this).parent()).toggle();
});

Demo