后循环中的JQuery onclick函数错误答案

【问题标题】：JQuery onclick function error within post loop后循环中的JQuery onclick函数错误
【发布时间】：2018-06-10 07:02:24
【问题描述】：

我在 wordpress 中有一个帖子循环，我正在尝试在点击显示事件上调用 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-->

【问题讨论】：

您正在使用 ID 来显示表单。改用 HTML 类
感谢 Abid，这很有帮助 - 我已更改为类选择器，现在其他每个按钮都将打开联系表。现在的问题是，他们都打开了循环中第一个帖子的联系表单，而不是按钮所在的帖子。有什么想法吗？
由于您发布的示例中只有一个帖子，因此很难看到发生了什么。你能用两个帖子显示代码吗？只是为了了解“第一篇文章”在上下文中的含义
我认为 csp 在下面是正确的 - 我正在显示帖子的存档循环，并且循环中的每个帖子都具有相同的元素 ID。我需要的是在循环中的每个帖子中动态设置 ID，然后在每个 Jquery 调用中定位该动态 ID

标签： javascript php jquery wordpress while-loop

【解决方案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>

【讨论】：

谢谢 Moob。抱歉应该更清楚 - 联系表格在帖子本身内，问题是让 Jquery 定位触发按钮所在的当前帖子中的表单。目前，jquery 总是从我相信的第一篇文章中打开表单，因为它们都有相同的 ID。
@Matt-SalusaCommunity 哦，我看到您已在问题中更新了示例代码。我会相应地更新我的答案...
@Matt-SalusaCommunity 请查看我更新的示例。
传奇谢谢 - 完美运行。感谢您的帮助！

【解决方案2】：

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

【讨论】：

谢谢你说得通。我为循环中的每个帖子使用一个模板，因此它们都具有相同的 ID。您知道如何在循环中的每个新帖子中动态设置 ID，然后如何使用 jquery 函数选择该动态 ID？
你用什么做模板？我希望有一种方法可以跟踪一个 interator 变量并将其附加到 ids 上。
在 Wordpress 中使用 PHP 循环模板。我敢肯定一定有一种方法，只是不确定如何。谢谢，M

【解决方案3】：

这是一个可以做你想做的事情的代码笔。

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

【讨论】：