javascript - HTML 标签在另一个标签内循环

Question

我有一个选择和一个 div 元素列表，如下所示:

<select name="select" id="select">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
</select>
<button>submit</button>

<div id='list'>
    <div><h2>a</h2>0</div>
    <div><h2>b</h2>1</div>
    <div><h2>c</h2>2</div>
    <div><h2>d</h2>3</div>
    <div><h2>a</h2>0</div>
    <div><h2>b</h2>1</div>
    <div><h2>c</h2>2</div>
    <div><h2>d</h2>3</div>
</div>

我只想显示具有与所选值匹配的 h2 文本的 div。

我正在尝试以下 JavaScript 循环:

<script>
    var select = document.getElementById('select');
    var divItems = document.querySelectorAll('#table div');
    var h2Items = document.querySelectorAll('#table div h2');
    var button = document.querySelector('button');

    button.addEventListener('click',function(){
        var selectValue = select.value;

        for(i=0; i < divItems.length; i++){
            var h2Text = h2Items[i].innerHTML;
            if (h2Text == selectValue){
                divItems[i].display='block';
            } else {
                divItems[i].display='none';
            }
        }

    });

但是这不起作用。 console.log 显示 h2 的文本和所选值均正确， 但我不知道如何控制 div 的样式。 有人可以帮助我吗？ 谢谢。

Answer 1

您需要指定您正在更新样式。

divItems[i].display='block'; 应为 divItems[i].style.display='block';

和

divItems[i].display='none'; 应为 divItems[i].style.display='none';

此外，您的目标是 #table，但您应该定位 #list，因为这是在主 div 上设置的 id。

完整的 JS:

<script>
    var select = document.getElementById('select');
    var divItems = document.querySelectorAll('#list div');
    var h2Items = document.querySelectorAll('#list div h2');
    var button = document.querySelector('button');

    button.addEventListener('click',function(){
        var selectValue = select.value;

        for(i=0; i < divItems.length; i++){
            var h2Text = h2Items[i].innerHTML;
            if (h2Text == selectValue){
                divItems[i].style.display='block';
            } else {
                divItems[i].style.display='none';
            }
        }

    });
</script>