我有两个具有相同html的块。当我尝试在js中单击按钮后添加效果时,它在两个块中都有效。我该如何解决?谢谢你的帮助。
<div class="class-1">
<div class="red-line"></div>
<div class="first-btn"></div>
<div class="second-btn" style="display:none;"></div>
<div class="my-content">545646</div>
</div>
<div class="class-1">
<div class="red-line"></div>
<div class="first-btn"></div>
<div class="second-btn" style="display:none;"></div>
<div class="my-content">12323</div>
</div>
我的js:
$('.first-btn').click(function() {
$('.red-line').css('display' , 'none');
$('.my-content').css('height' , '500px');
$('.second-btn').css('display' , 'block');
$('.first-btn').css('display' , 'none');
});
答案 0 :(得分:1)
您需要识别当前元素上下文中的元素,即this
。使用.closest()
遍历父级,然后使用.find()
/ .children()
查找所需的元素。
$('.first-btn').click(function() {
var parent = $(this).closest('.class-1');
parent.find('.red-line').css('display' , 'none');
parent.find('.my-content').css('height' , '500px');
parent.find('.second-btn').css('display' , 'block');
$(this).css('display' , 'none');
});
作为替代方案,您也可以使用siblings()
$('.first-btn').click(function() {
$(this).siblings('.red-line').css('display' , 'none');
$(this).siblings('.my-content').css('height' , '500px');
$(this).siblings('.second-btn').css('display' , 'block');
$(this).css('display' , 'none');
});
答案 1 :(得分:1)
首先获取父级,然后选择其中的子级,如下所示。
$('.first-btn').click(function () {
var parent = $(this).parent();
$('.red-line', parent).css('display', 'none');
$('.my-content', parent).css('height', '500px');
$('.second-btn', parent).css('display', 'block');
$('.first-btn', parent).css('display', 'none');
});