如何使用JS点击qualify按钮时获取对应电影名称（解决仅获首个节点问题）

第一步：修复HTML的ID重复问题 #

HTML中ID必须唯一，重复的id="title"和id="cal-btn"会导致JS无法正确定位元素，先修改为class：

<div class="container-movies" id="container-movies">
    <div class="movie">
        <span class="text1 title">Transformers</span>
        <p class="text2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore soluta ullam officiis tempore sapiente, nesciunt veniam. Vitae explicabo labore soluta quis, omnis vero nulla, dignissimos necessitatibus repellat perferendis quisquam laboriosam.
        </p>
        <span class="text2">gen</span>
        <div class="container-cal">
            <span class="cal">4</span>
            <button class="cal-btn">qualify</button>
        </div>
    </div>
    <div class="movie">
        <span class="text title">movie title</span>
        <p class="text2">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. At, sint fugit numquam dicta aperiam neque aliquam expedita ipsum sapiente assumenda rerum temporibus fuga similique sed, perspiciatis qui ipsa nihil adipisci.
        </p>
        <span class="text2">gen</span>
        <div class="container-cal">
            <span class="cal">4</span>
            <button class="cal-btn">qualify</button>
        </div>
    </div>
</div>

第二步：编写JS逻辑获取对应电影名称 #

推荐两种实现方式：

方式1：事件委托（优先选择，支持动态添加电影）

利用事件冒泡特性，给父容器绑定一次事件即可处理所有按钮的点击：

const movieContainer = document.getElementById('container-movies');

movieContainer.addEventListener('click', function(e) {
    // 确认点击的是评分按钮
    if (e.target.classList.contains('cal-btn')) {
        // 向上查找当前按钮所属的电影容器
        const currentMovie = e.target.closest('.movie');
        // 获取该电影的标题文本
        const movieTitle = currentMovie.querySelector('.title').textContent.trim();
        
        console.log('当前评分的电影：', movieTitle);
        // 此处可添加后续的评分修改逻辑
    }
});

方式2：逐个绑定事件（适合静态电影列表）

获取所有评分按钮，为每个按钮单独绑定点击事件：

const qualifyButtons = document.querySelectorAll('.cal-btn');

qualifyButtons.forEach(button => {
    button.addEventListener('click', function() {
        // 向上找到所属的电影容器
        const currentMovie = this.closest('.movie');
        const movieTitle = currentMovie.querySelector('.title').textContent.trim();
        
        console.log('当前评分的电影：', movieTitle);
    });
});

关键方法说明 #

• closest('.movie')：从当前元素向上遍历DOM树，找到最近的匹配.movie选择器的父元素，精准定位按钮所属的电影项。
• querySelector('.title')：在指定的电影容器内查找标题元素，避免获取到其他电影的标题内容。

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