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

Answer 2

在使用jQuery时，您可以使用jQuery click和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 example 。

<强> 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 example

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

}

<强> demo

Answer 5

您可以使用call

在this中设置toggle_content的上下文

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

http://jsfiddle.net/eyWBq/

使用jquery按类隐藏同一父项内的元素

5 个答案: