jquery顯示後循環中的div？

Question

我有這個非常簡單的腳本來顯示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> 

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的具有相同的class和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值不同。

一旦糾正並且標記再次有效，我懷疑您當前擁有的客戶端代碼仍然可以不加修改地工作。