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

时间:2016-02-12 10:44:22

标签: javascript jquery

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

2 个答案:

答案 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');
});