Question

我有一组img，我正在使用nth-of-type选择一些img，然后使用display：none，但我要寻找的是单击链接（btn）后显示的（ display：block）隐藏的img。

<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

例如，如果您有五个元素，而每个奇数元素都不显示，那么您可以拥有d-block类，即：

.d-block{
  display:block;
}

然后，您将为每个奇数元素添加类，并为其添加具有名称的类（例如element-odd），其属性为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');
}

当单击btn时，如何选择设置为display：none的nth-of-type选择器将其更改为display：block？

1 个答案: