單擊以顯示帶有 Javascript 的 div

Question

我的網站上有一個頁面，我在其中顯示一個內容塊並為用戶提供單擊“查看更多”以顯示更多內容的選項。

這是我當前的演示。

HTML：

<p>
<a href="#" id="category36SeeMore">See more</a>
</p>

<div class="category36">
test
</div>

<div class="category36" style="display:none;">
test
</div>

<div class="category36" style="display:none;">
test
</div>

<div class="category36" style="display:none;">
test
</div>

有人可以給我一些關於如何為#category36SeeMore創建 function 的指示，以便它顯示所有帶有 class category36的 div 嗎？

Answer 1

在category36SeeMore點擊時，您可以先獲取其 id，然后從中替換SeeMore ，如下所示：

const id = this.id.replace('SeeMore', '')

因此，您可以從中獲取實際的 class 名稱category36 。 然后，您可以使用以下命令找到具有該 class 的所有元素：

document.querySelectorAll('.' + id)

最后使用.forEach ，將所有元素的顯示樣式更改為block以使所有元素再次可見。

演示：

 const btn = document.getElementById("category36SeeMore"); btn.addEventListener("click", function(e){ e.preventDefault(); const id = this.id.replace('SeeMore', '') document.querySelectorAll('.' + id).forEach(el=>el.style.display = 'block') });

 .category36 { margin: 5px; padding: .5rem; box-shadow: 2px 2px 5px rgba(0,0,0,0.03); border-radius: 4px; background: Skyblue; border-bottom: 1px solid #F9F2D6; border-right: 1px solid #F9F2D6; }

 <p> <a href="#" id="category36SeeMore">See more</a> </p> <div class="category36"> test </div> <div class="category36" style="display:none;"> test </div> <div class="category36" style="display:none;"> test </div> <div class="category36" style="display:none;"> test </div>

Answer 2

您可以使用jquery 。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#category36SeeMore").click(function(){
        $(".category36").css('display','block');
    });
});
</script>