如何循环遍历多个元素ID修改DOM属性实现图片显隐效果

能否通过循环遍历元素ID批量修改DOM属性？ #

完全可以，这是前端批量操作DOM的常规实现方案，你的代码未达到预期是存在几处明确的语法和逻辑问题，修正后即可正常运行。

现有代码存在的问题 #

• 核心语法错误：getElementById('i') 传入的是固定字符串'i'，不会读取循环中定义的i变量值，每次循环都会尝试查找id为i的元素，完全无法匹配id为1-6的包裹图片。
• 逻辑漏洞：原有循环仅处理了需要显示的图片，没有对序号超出当前存储数量的图片做隐藏处理，若先设置大数量点Run、再调小数量点Run，之前显示的多余图片不会自动消失。
• 交互缺失：增减数量操作没有同步展示当前选中的数值，用户无法直观看到当前设置的包裹数量。

修正后的完整可运行代码 #

JavaScript 逻辑部分 #

let packetStorageNum = 0;
// 挂载当前数量显示节点
const numTip = document.getElementById('current-num');

function increase_stored(){
    packetStorageNum++;
    // 限制最大值为6
    if(packetStorageNum > 6) packetStorageNum = 6;
    // 同步更新显示数值
    numTip.textContent = packetStorageNum;
}

function decrease_stored(){
    packetStorageNum--;
    // 限制最小值为0
    if(packetStorageNum < 0) packetStorageNum = 0;
    // 同步更新显示数值
    numTip.textContent = packetStorageNum;
}

function run()
{
    // 遍历全部6张包裹图片
    for(let i = 1; i <= 6; i++){
        const currentImg = document.getElementById(String(i));
        // 序号小于等于当前存储数量则显示，否则隐藏
        currentImg.style.display = i <= packetStorageNum ? 'block' : 'none';
    }
}

HTML 结构部分 #

<body>
    <div class="container">
        <p>仓库内包裹数量：<span id="current-num">0</span></p>
        <div class="buttons">
            <input type="button" onClick="increase_stored()" value="Increase"/>
            <input type="button" onClick="decrease_stored()" value="Decrease"/>
        </div>
        <input type="button" onClick="run()" value="Run"/>
    </div>

    <div class="packet-wrap">
        <div><img src="images/box.jfif" alt="包裹" id="1" style="display:none;"></div>
        <div><img src="images/box.jfif" alt="包裹" id="2" style="display:none;"></div>
        <div><img src="images/box.jfif" alt="包裹" id="3" style="display:none;"></div>
        <div><img src="images/box.jfif" alt="包裹" id="4" style="display:none;"></div>
        <div><img src="images/box.jfif" alt="包裹" id="5" style="display:none;"></div>
        <div><img src="images/box.jfif" alt="包裹" id="6" style="display:none;"></div>         
    </div>
</body>

修正要点说明 #

• 修复ID获取逻辑：把固定字符串'i'替换为循环变量i，转成字符串类型传入getElementById即可正确匹配对应id的图片。
• 补全显示/隐藏判断逻辑：循环覆盖全部6张图片，根据序号和当前存储数量的对比结果统一设置显示状态，解决多余图片无法隐藏的问题。
• 增加数值实时展示：新增数量显示节点，操作增减按钮时同步更新数值，交互逻辑更完整。

开发提示：虽然HTML标准允许纯数字作为元素id，但实际项目中更推荐给id增加业务前缀，例如packet-1、packet-2，遍历ID时通过document.getElementById('packet-' + i)获取元素，代码兼容性和可读性更好。

内容的提问来源于stack exchange，提问作者IPCZ