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

Hide element inside same parent by class with jquery

本文关键字：元素 jquery 隐藏 使用      更新时间：2023-09-26

采用以下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>

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

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

演示

使用 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()
})

您可以使用

call在toggle_content中设置this的上下文 

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

http://jsfiddle.net/eyWBq/

我有答案给你！

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

演示

试试这个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();
}​

js小提琴示例

相关文章：