post循环中的JQuery onclick函数错误

Question

我在wordpress中有一个帖子循环，我试图在点击显示事件上调用一个jquery，它会在点击时显示该帖子的联系表单。

onclick show仅适用于循环中的第一个帖子，它将显示该帖子的联系表单没有问题 - 但是，它不适用于循环中的任何其他帖子。谁知道为什么会这样？带有post循环的页面是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

您正在使用具有相同id的contact-form-wrapper的多个元素。相反，您需要使每个元素具有唯一的ID，然后在相应的jquery调用中选择该id。给定选择器的Jquery将返回第一个匹配元素，这就是为什么它每次只选择第一个帖子。

Answer 3

这是一个可以满足您需求的codepen。

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

这是你可以使用的jQuery - 基本上寻找兄弟并改变它的风格

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