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();
});

演示

Answer 2

当您使用 jQuery 时，您可以使用 jQueryclick和siblings()方法，请尝试以下操作：

获取匹配元素集中每个元素的兄弟姐妹，可选地由选择器过滤。

$('.box a').click(function(){
   $(this).siblings('.box_content_1').toggle()
})

---

您可以使用data=*属性来选择锚点的目标元素：

<div class="box">
   <a href="#" data-toggle="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="#" data-toggle="2">Toggle</a>
   <h2>Some Title</h2>
   <div class="box_content box_content_1"></div>
   <div class="box_content box_content_2"></div>
</div>

$('.box a').click(function(e){
    e.preventDefault();
    var which = $(this).data('toggle');
    $(this).siblings('.box_content_'+ which).toggle()
})

Answer 3

试试这个jsFiddle 示例。

HTML

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

jQuery

function toggle_content(key,link){
   link.siblings(".box_content_"+key).toggle();
}​

jsFiddle 示例

Answer 4

我有你的答案！

HTML：

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

JS：

function toggle_content(key) {
    $('.box_content_' + key).toggle();

}​

演示

Answer 5

this您可以使用设置intoggle_content的上下文call

onclick="toggle_content.call(this, 1)"

http://jsfiddle.net/eyWBq/