在同一块内切换div

Question

我正在使用jquery在以下两个div之间切换:

$(".edit").click(function(){
   $(".module-content").toggle();
   $(".module-edit").toggle();
});

我将通过以下方式在页面上有几个具有相同类的块:

<div class="module">
   <a class="edit" href="#">Edit</a>
   <div class="module-content">
      <?php echo the_field('company_information'); ?>
   </div>
   <div class="module-edit" style="display:none;">              
      <?php acf_form( $company_information ); ?>
   </div>
</div>

我怎样才能只在编辑链接下面但仅在该模块块内切换div？

我知道它与这个问题非常相似 - 切换一个同一个类的div,但我无法让它工作!

Answer 1

您只需选择兄弟元素,将您的javscript代码更改为:

$(".edit").click(function(){
  $(this).siblings(".module-content, .module-edit").toggle();
});

现在,它将兄弟DOM元素与类匹配module-content,module-edit并toggle()在所有匹配元素上调用该方法.

编辑:您要求一种切换链接词的方法,这应该适合您:

$('.edit').click(function(){

  var link = this;

  // Change the link wording 
  if ($(link).html() == 'edit')
    $(link).html('close');
  else
    $(link).html('edit');

  // Open or close the sibling DIV elements
  $(link).siblings('.module-content, .module-edit').toggle();

  return false;
});