1

我正在使用 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但我无法让它工作！

4

4 回答 4

5

You just need to select the sibling elements, change your javscript code to this:

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

That's now matching the sibling DOM elements with classes module-content and module-edit and calling the toggle() method on all matched elements.

Edit: You requested a way to toggle the link word too, this should work for you:

$('.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;
});
于 2013-02-20T14:54:49.137 回答
1

我最近做了类似的事情。我选择的路线——不确定它是否是最佳实践——是从元素的 onclick 属性中触发 jquery。然后将当前元素传递给您的切换功能，因此您只影响上下文中的 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();
}

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

于 2013-02-20T15:02:00.237 回答
0 
$(".edit").click(function(){
   var $this = $(this);
   $this.siblings(".module-content").toggle();
   $this.siblings(".module-edit").toggle();
});
于 2013-02-20T14:54:21.520 回答
0

你需要给 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();
于 2013-02-20T14:57:16.403 回答