Question

我有以下问题：

我已经有一个代码，当它具有特定值（在所有站点上都不同）时，它会隐藏 class元素1 。

现在我也只想隐藏 class元素2 ，前提是 class元素1 已经隐藏。

你们对如何执行此操作有任何想法吗？

谢谢！

Answer 1

可能的解决方案是添加一个类，该类将隐藏其自身和下一个元素。当您将“ hideElement1”类添加到父级时，您会隐藏element1和element2等，仅当元素数量较少时，我才建议使用此解决方案，否则应使用JavaScript。

<div class="parent">
    <div class="element1">element1</div>
    <div class="element2">element2</div>
    <div class="element3">element3</div>
    <div class="element4">element4</div>
</div>

<label for="tbx">insert number</label>
<input type="number" id="tbx" name="tbx" value="" />
<input type="button" id="btn" name="btn" value="click to hide" />

<style>
    .parent.hideElement1 .element1, .parent.hideElement1 .element2 {
        display: none;
    }

    .parent.hideElement2 .element2, .parent.hideElement2 .element3 {
        display: none;
    }

    .parent.hideElement3 .element3, .parent.hideElement3 .element4 {
        display: none;
    }
</style>

<script>

    var btn = document.getElementById('btn');
    var tbx = document.getElementById('tbx');
    btn.addEventListener('click', function () {
        hideElementbyIndex(tbx.value);
    });

    function hideElementbyIndex(elementIndex) {
        var elementClassNamePrefix = 'element';

        var elementsToHide = document.getElementsByClassName(elementClassNamePrefix + elementIndex);
        hideAll(elementsToHide);
        elementIndex++;
        var nextElementsToHide = document.getElementsByClassName(elementClassNamePrefix + elementIndex);
        hideAll(nextElementsToHide);
    }

    function hideAll(elements) {
        for (var i = 0; i < elements.length; i++) {
            elements[0].style.display = 'none';
        }
    }


</script>

Answer 2

如果要隐藏元素及其旁边的元素，则应使用“ +”选择器。

.hiderClass,
.hiderClass + .element {
  display: none;
}

Answer 3

确保您使用的CSS样式为Array.prototype.map()，然后使用var obj = { name: 'joe', age: 23, student: true }; const result = Object.keys(obj).map((elm) => obj[elm]); console.log(result);或display: none或element.classList.add('cssclass')。

切换是最好的，因为如果看到该类在里面，它将分别删除或添加。

希望有帮助。

CSS：隐藏另一个元素时隐藏一个元素

3 个答案: