如何在块中单击按钮后进行不同的操作 块相同的名称类 (Jquery）

How to make different actions after click button in blocks the same name classes (Jquery)?

本文关键字：操作 Jquery 单击 按钮      更新时间：2023-09-26

我有两个具有相同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');
});

首先获取父级，然后选择其中的子项，如下所示。

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

您需要在当前元素上下文中识别元素，即 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');
});
相关文章：