单击时切换 div 内容

Question

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

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

这是我附上上述功能的代码。

只需尝试单击“编辑”，它将更新两个 div，我正在寻找的是，仅更新我单击编辑按钮的相应 div，而不是所有 div [基于“this”值它会更新 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>

Answer 2

当你这样做时：

  var noEdit = $('.not-editable');
  var edit = $('.editable');

您已经在 DOM 中查询具有这些类的对象，因此，将它们保存到变量中（将其与 document.querySelectorAll('.not-editable'). 在将类保存为字符串（或硬编码或其他）时尝试相同的操作：

  var noEdit = '.not-editable';
  var edit = '.editable';

Answer 3

使用parent 和find。下面的例子。

$('.edit_toggle').click(function(e){
  e.preventDefault();
  var noEdit = $(this).parent().parent().find('.not-editable');
  var edit = $(this).parent().parent().find('.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 4

  <script>
     $('.edit_toggle').click(function(e){
     e.preventDefault();
     $(this).parent().next().hide();
     $(this).parent().next().next().show();
     });
  </script>

如果你想保持相同的 HTML 结构，上面的脚本会为你工作。

Answer 5

使用这个JS

获取最近容器的引用

var container = this.closest('.container-1');

仅选择该容器内的元素，如下所示

 var noEdit = $('.not-editable',container);
 var edit = $('.editable',container);

整个 JS

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

片段

$('.edit_toggle').click(function(e){
  e.preventDefault();
  var container = this.closest('.container-1');
  var noEdit = $('.not-editable',container);
  var edit = $('.editable',container);
  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>