Question

我有这个非常简单的脚本来显示div onclick。但是，此代码处于post循环中，导致脚本崩溃。显然，因为多个链接和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>

Answer 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 />

Answer 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>

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

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

一旦纠正并且标记再次有效，我怀疑您当前拥有的客户端代码仍然无需修改即可使用。

Jquery在post循环中显示div？

2 个答案: