ポストループ内でJQuery onclick関数のエラーが発生しました

Question

WordPressに投稿のループがあり、clickイベントでjqueryを呼び出そうとしています。クリックするとその投稿の連絡フォームが表示されます。

onclickショーは、そのポストの連絡先フォームを問題なく表示するループ内の最初のポストでのみ機能しますが、ループ内の他のポストでは機能しません。なぜこれがあるのか​​誰にでも分かりますか？ポストループのあるページはhttps://www.salusa.co.uk/specialist-training-courses/です。

コードはおおよそである：

<div class="archive-posts-loop"> 

<div class="post"> 
    <div class="enquire">    
     <a class="show-form">Contact Provider</a>     
    </div> 

<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;"> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

<script> 

$(document).ready(
function(){ 

    $(".show-form").click(function() { 
     $("#contact-form-wrapper").show("fast"); 
    }); 
    $("#close").click(function() { 
     $("#contact-form-wrapper").hide("fast"); 
    }); 
}); 

</script> 


</div><!--post--> 


<div class="post"> 
    <div class="enquire">    
     <a class="show-form">Contact Provider</a>     
    </div> 

<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;"> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

<script> 

$(document).ready(
function(){ 

    $(".show-form").click(function() { 
     $("#contact-form-wrapper").show("fast"); 
    }); 
    $("#close").click(function() { 
     $("#contact-form-wrapper").hide("fast"); 
    }); 
}); 

</script> 

</div><!--post--> 

</div><!--archive-post-loop--> 

Answer 1

投稿ごとに新しいフォームがあるので、投稿の正しいフォームをターゲットにする必要があります。委任されたクリックイベントをリッスンし、それに応じてネストされたフォームを表示/非表示できます。あなたの例に示されているように、各フォームに対してスクリプトを繰り返す必要はありません（また、そうする必要もありません）。ここで

$(function(){ 
 

 
    $(".post") 
 
     .on("click", ".show-form", function() { 
 
      $(this).parents(".post").find(".contact-form-wrapper").show("fast"); 
 
     }) 
 
     .on("click", ".close", function() { 
 
      $(this).parent().hide("fast"); 
 
     }); 
 
     
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="post"> 
 
    <div class="enquire">    
 
     <a class="show-form">Contact Provider</a>    
 
    </div> 
 
    <div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;"> 
 
     [Form here] <a href="#" class="close">close</a> 
 
    </div> 
 
</div> 
 

 
<div class="post"> 
 
    <div class="enquire">    
 
     <a class="show-form">Contact Provider</a>    
 
    </div> 
 
    <div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;"> 
 
     [Form here] <a href="#" class="close">close</a> 
 
    </div> 
 
</div> 
 

 
<div class="post"> 
 
    <div class="enquire">    
 
     <a class="show-form">Contact Provider</a>    
 
    </div> 
 
    <div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;"> 
 
     [Form here] <a href="#" class="close">close</a> 
 
    </div> 
 
</div>

Answer 2

あなたがcontact-form-wrapperの同じIDを持つ複数の要素を使用しています。代わりに、各要素に一意のIDを設定し、それぞれのjquery呼び出しでそのIDを選択する必要があります。 Jqueryは、セレクタが指定されている最初の一致する要素を返します。なぜなら、そのたびに最初の投稿のみが選択されるからです。

Answer 3

何をしたいんcodepenです。

https://codepen.io/abidhasan/pen/wpdoyO?editors=1111

これは、あなたが使用できるjQueryのである - 基本的にあなたがショー形式のIDを使用している兄弟を探して、そのスタイル

$(".post .show-form").on("click", function() { 
    $(this).parent().siblings()[0].style.display= "block"; 
}); 

$(".post .hide-form").on("click", function() { 
    $(this).parent().siblings()[0].style.display= "none"; 
});