Jquery在后循环中显示div？答案

【问题标题】：Jquery show div in post loop?Jquery在后循环中显示div？
【发布时间】：2015-11-19 04:29:18
【问题描述】：

我有一个非常简单的脚本来显示一个 div onclick。但是，此代码位于后循环中，这会导致脚本崩溃。显然，因为多个链接和 div 具有相同的类和 id。如何使此脚本适用于具有多个帖子的页面的每个帖子？我需要做一个foreach吗？还阅读了一些关于在 jquery 中添加类的内容。谁能帮帮我？

<style>
div.custhide{display:none;}
</style>

<script>
 function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
</script>


    <a class="my-post-like" onclick="setVisibility('custhide', 'inline');";>Click here to see</a>
    <div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide" id="custhide">
    Content hidden.
    </div>

【问题讨论】：

标签： jquery wordpress loops

【解决方案1】：

因为你已经用 jQuery 标记了它，所以使用一个 jQuery 事件处理程序来显示点击锚点的下一个元素

jQuery(function($) {
  $('.my-post-like').click(function() {
    $(this).next().show()
  })
})

div.custhide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="my-post-like">Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<a class="my-post-like">Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<a class="my-post-like">Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<a class="my-post-like">Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>

如果你不想使用 jQuery（IE9+ 支持）

function setVisibility(el, visibility) {
  el.nextElementSibling.style.display = visibility;
}

div.custhide {
  display: none;
}

<a class="my-post-like" onclick="setVisibility(this, 'inline');" ;>Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<br />
<a class="my-post-like" onclick="setVisibility(this, 'inline');" ;>Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<br />
<a class="my-post-like" onclick="setVisibility(this, 'inline');" ;>Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<br />
<a class="my-post-like" onclick="setVisibility(this, 'inline');" ;>Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<br />

【讨论】：

【解决方案2】：

因为多个链接和 div 具有相同的类和 id

具有相同id 的多个元素是无效标记，因此该标记上的任何 JavaScript 行为都将变为未定义。所以首先要解决这个问题。

为您的元素赋予独特的id 值。我不是 100% 熟悉 Wordpress，但是 PHP 代码在这个循环中工作吗？在普通的 PHP 中，它可能看起来像这样：

<a class="my-post-like" onclick="setVisibility('custhide<?php echo $i ?>', 'inline');";>Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide" id="custhide<?php echo $i ?>">
Content hidden.
</div>

注意每个id 附加的$i 值。这是假设服务器端代码中的循环具有一些递增的$i 值。如果它有其他东西，请使用其他东西。（也许是代码循环的对象/记录的标识符？）

无论哪种方式，想法都是在循环的每次迭代中附加一些不同的值，从而使客户端 id 值不同。

一旦更正并且标记再次有效，我怀疑您当前拥有的客户端代码在不修改的情况下仍然可以工作。

【讨论】：