如何選擇設置為display：none的nth-type選擇器，將其更改為顯示：單擊btn時阻止？

Question

我有一個im的div，我正在使用nth-of-type來選擇一些imgs然后使用display：none但是我正在尋找的是當點擊一個鏈接（btn）時，它顯示（display：block ）隱藏的imgs。

<div class="item prop-item">
    <a href="<?= $permalink ?>">
        <div class="image" style="background-image: url(<?= $thumbnail ?>);"></div>
        <div class="title title-prop"><?= $title ?></div>
        <div class="blurb blurb-prop"><?= $blurb ?></div>
    </a>
</div>

div.prop-item:nth-of-type(-n + 2) {
    display: none;
}

<a href="#" class="link">
    <div id="showImgs" class="link-text">load More</div>
</a>

propBtn = document.getElementById("showImgs");
propItem = document.getElementsByClassName("prop-item");
propItem.onclick = function(){
    if("display" === "none"){
        propItem.style.display = "block";
    }
}

Answer 1

例如，如果您有五個元素，並且每個奇數元素都顯示為none，那么您可以使用類d-block，它將是：

.d-block{
  display:block;
} 

然后，您將為每個奇數元素添加類，名稱為class，例如，element-odd，with propery：display：none。

.elements-odd{
  display:none;
}

然后你會這樣做：

var oddElements = document.getElementsByClassName('elements-odd');
for(var i = 0; i < oddElements.length; i++){
  oddElements[i].classList.add('d-block');
}