Question

在这里，当我点击box1内的按钮时，我想隐藏或显示box2和box3。类盒也是动态重复的时间。因此，每当我点击按钮时，它必须隐藏/显示与该特定类框相关联的类box2和box3，而是显示来自所有类的box2和box3元素。请帮我。如果您可以使用此关键字解决此问题，那也会更好。谢谢。下面是我的html和jquery代码。

＆＃13;

$(document).ready(function() {
  $(".box2").hide();
  $(".box3").hide();

  $('.see').click(function() {
    var value = $(this).attr('value');
    $('.box2').toggle('fast');
    $('.box3').toggle('fast');

    if (value == 'See More') {
      $(this).attr('value', 'See Less');
    } else if (value == 'See Less') {
      $(this).attr('value', 'See More');
    }

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Box">
  <div class="box1">
    <input type="button" class="see" value="See More" />
  </div>
  <div class="box2">
  </div>
  <hr />
  <div class="box3">
  </div>
</div>

＆＃13;

Answer 1

使用$(this).closest(".Box")查找包含所点击按钮的框。在那里，您可以在同一个框中找到.box2和.box3。

另外，使用.val()来获取和设置元素的值。

＆＃13;

$(document).ready(function() {
  $(".box2, .box3").hide();

  $('.see').click(function() {
    $(this).closest(".Box").find(".box2, .box3").toggle('fast');
    $(this).val(function(i, value) {
      return value == 'See More' ? 'See Less' : 'See More';
    });

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Box">
  <div class="box1">
    <input type="button" class="see" value="See More" />
  </div>
  <div class="box2">
    Box 2
  </div>

  <hr />
  <div class="box3">
    Box 3
  </div>
</div>

<hr style="height: 2px; border: none; background-color: #000;">

<div class="Box">
  <div class="box1">
    <input type="button" class="see" value="See More" />
  </div>
  <div class="box2">
    Box 2
  </div>

  <hr />
  <div class="box3">
    Box 3
  </div>
</div>

＆＃13;

单击按钮时隐藏/显示相同类名的div元素

1 个答案: