javascript - 单击时切换 div 内容

Question

每个 h5 元素内都有一个编辑按钮，如果我单击此按钮，它将隐藏类名为“not-editable”的 div 并显示类名为“editable”的 div。

我编写的代码只有在我有一个容器时才能正常工作，但如果我添加另一个容器并尝试单击编辑按钮，它将更新相应容器的两个 div。

我附上上述功能的代码。

只需尝试单击“编辑”，它就会更新两个 div，我正在寻找的是，仅更新我单击编辑按钮的相应 div，而不是所有 div [基于“此”值它会更新 div，我尝试使用“this”，但不知道为什么它不起作用，如果可能的话，请尝试解释为什么我的代码不起作用，因为我是 JavaScript 新手。]。

希望您能理解并提前感谢您的帮助。

$('.edit_toggle').click(function(e){
  e.preventDefault();
  var noEdit = $('.not-editable');
  var edit = $('.editable');
  if($(this).find(noEdit)){
    $(noEdit).fadeOut();
    $(edit).fadeIn();
  }
});

.not-editable{
	display: block;
}
.editable{
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container-1">
  <h5>
    header 
    <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="not-editable">
     Lorem
  </div>
  <div class="editable">
    Lorem 123
  </div>
</div>
<div class="container-1">
  <h5>
   another header 
   <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="row not-editable">
     another Lorem
  </div>
  <div class="row editable">
    another Lorem 123
  </div>
</div>

Answer 1

您有几个问题。首先，您要检索所有 .not-editable 和 .editable 元素，而不仅仅是那些与单击的 .edit_toggle 相关的元素。其次，this 是 .edit_toggle。调用 find() 是多余的，因为您要查找的元素不是它的子元素。最后，您需要检查 if 条件中的 length 属性，因为 jQuery 选择器会返回一个对象，该对象始终等于 true。

要解决此问题，您可以修改逻辑以获取 closest() 容器，然后从那里find() 所需的元素，如下所示:

$('.edit_toggle').click(function(e) {
  e.preventDefault();
  var $container = $(this).closest('.container-1');

  $container.find('.not-editable').fadeOut();
  $container.find('.editable').fadeIn();
});

.not-editable { display: block; }
.editable { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-1">
  <h5>
    header
    <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="not-editable">
    Lorem
  </div>
  <div class="editable">
    Lorem 123
  </div>
</div>
<div class="container-1">
  <h5>
    another header
    <a href="#" class="edit_toggle">edit</a>
  </h5>
  <div class="row not-editable">
    another Lorem
  </div>
  <div class="row editable">
    another Lorem 123
  </div>
</div>