1

私はjqueryを使用して、次の2つの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を切り替えるにはどうすればよいですか？

私はそれがこの質問に非常に似ていることを知っています-同じクラスで1つのdivを切り替えますが、それを機能させることができません！

4

4 に答える 4

5

兄弟要素を選択し、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;
});
于 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

.module-content/.module-edit切り替えたいコンテキストをjQueryに与える必要があります。

$(".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 に答える