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，但仅在该模块块内？

我知道这与这个问题非常相似 - Toggle one div with same class但我无法让它发挥作用！

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;
});

Answer 2

我最近做了类似的事。我选择的路线 - 不确定它是否是最佳实践 - 是从元素的onclick属性中触发jquery。然后将当前元素传递给你的toggle函数，这样你只会影响上下文中的div。可以这么说。

例如：

<div class="module">
  <a class="edit" href="#" onclick="my_toggle(this);">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>

然后在你的javascript中写下类似于

的内容

function my_toggle(el){
  // retrieve context element as jquery object
  var jq_el = $(el);
  // toggle
  jq_el.parent().children('.module-content').toggle();
  jq_el.parent().children('.module-edit').toggle();
}

上面的代码段没有经过测试，因此可能包含一些错误，但我相信这个概念是有效的。

Answer 3

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

Answer 4

你需要给jQuery一些你要切换.module-content / .module-edit的上下文：

$(".edit").click(function(){
   var parent = $(this).parent();
   parent.find(".module-content").toggle();
   parent.find(".module-edit").toggle();
});

或

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

（两者都做同样的事情）。

顺便说一句，您可以通过同时切换两个项来简化呼叫：

parent.find(".module-content, .module-edit").toggle();

在同一块内切换div

4 个答案: