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>

Answer 2

我已经改变了几件事，我将在下面解释，但首先是按预期工作的解决方案：

const select = document.getElementById('select');
const divItems = document.querySelectorAll('#list div'); // this was #table 
const h2Items = document.querySelectorAll('#list div h2');
const button = document.querySelector('button');

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

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

<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>

建议：

1. 值得检查HTMLElement.style 的工作原理，请找到链接here。
2. 另外学习var、let和const之间的区别。
3. == 和 === 之间的最后但并非最不重要的区别。

我希望这会有所帮助！