POST循环内的jQuery onclick函数错误

Question

I have a loop of posts in wordpress and I am trying to call a jquery on click show event which will show a contact form for that post when clicked.

The onclick show works only for the first post in the loop where it will display the contact form for that post no problem - but, it does not work for any of the other posts in the loop. Anyone know why this may be? The page with the post loop is https://www.salusa.co.uk/specialist-training-courses/ .

The code is roughly:

<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

As you have a new form for each post you need to target the correct form for the post. You can listen for delegated click events and show/hide the nested form accordingly. Note that you do not need (nor should have) the script repeated for each form as shown in your example.

 $(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

You are using multiple elements with the same id of contact-form-wrapper . Instead you need to make each element have a unique id, and then select that id in the respective jquery calls. Jquery will return the first matching element given a selector, which is why it only selects the first post each time.

Answer 3

Here is a codepen that does what you want.

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

This is the jQuery that you can use - basically look for the sibling and change its style

$(".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";
});