如何在JavaScript的for循环语句中修改指定Div的颜色？

嘿，我来帮你搞定这个问题！首先得提个小坑：你PHP循环里输出的id='divborder'和id='Title'会重复哦，HTML规范里id必须是唯一的，重复id会导致后续JS选择元素出错，咱们先把这个问题修正，再处理事件逻辑。

第一步：修正PHP循环的DOM结构 #

把重复的id改成class，或者给容器加带索引的唯一id（方便精准定位），示例代码如下：

<?php
// 假设你是遍历视频数据数组，比如从数据库获取的内容
$videoList = [
    ['src' => 'video1.mp4', 'title' => '视频标题1'],
    ['src' => 'video2.mp4', 'title' => '视频标题2']
];

foreach ($videoList as $index => $video) {
?>
<!-- 用带索引的唯一id，同时保留class用于批量选择 -->
<div id="divborder-<?php echo $index; ?>" class="div-border">
    <!-- Title也改成class，避免重复id -->
    <div class="video-title"><?php echo $video['title']; ?></div>
    <br>
    <video src="<?php echo $video['src']; ?>" controls>
        你的浏览器不支持视频播放
    </video>
</div>
<?php
}
?>

第二步：编写JS事件逻辑 #

现在每个视频都对应一个独立的外层容器，我们可以在视频播放结束的事件里，精准找到对应的容器并修改样式：

// 获取页面上所有视频元素
const videos = document.querySelectorAll('video');

// 给每个视频添加播放结束事件监听器
videos.forEach(video => {
    video.addEventListener('ended', function() {
        // 用closest快速找到最近的.div-border容器（this指向当前播放结束的视频）
        const targetDiv = this.closest('.div-border');
        
        if (targetDiv) {
            // 修改容器的背景颜色（根据需求换成你要的颜色）
            targetDiv.style.backgroundColor = '#e8f4f8';
            // 如果要修改标题的颜色，找到容器内的.video-title元素
            const titleElement = targetDiv.querySelector('.video-title');
            if (titleElement) {
                titleElement.style.color = '#2c3e50';
            }
        }
    });
});

兼容旧浏览器的写法 #

如果需要兼容IE这类不支持closest的旧浏览器，可以用循环向上查找父元素的方式代替：

// 自定义函数：向上查找带指定class的父元素
function findParentByClass(element, className) {
    let parent = element.parentNode;
    while (parent && !parent.classList.contains(className)) {
        parent = parent.parentNode;
    }
    return parent;
}

// 在事件里替换closest
videos.forEach(video => {
    video.addEventListener('ended', function() {
        const targetDiv = findParentByClass(this, 'div-border');
        if (targetDiv) {
            targetDiv.style.backgroundColor = '#e8f4f8';
            const titleElement = targetDiv.querySelector('.video-title');
            if (titleElement) {
                titleElement.style.color = '#2c3e50';
            }
        }
    });
});

关键逻辑说明 #

• 用this在事件回调中获取当前播放结束的视频元素，避免混淆多个视频。
• 通过closest（或自定义查找函数）精准定位到该视频所属的外层容器，确保修改的是对应模块的样式，不会影响其他视频容器。
• 修正了重复id的问题，保证DOM结构符合规范，后续JS操作不会出问题。

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