影院网站开发：点击场次区域如何获取tickets__showtime元素并修改属性

要解决点击场次区域内任意位置时，精准获取对应div.tickets__showtime元素的问题，推荐以下两种直接有效的方法：

1. 使用Element.closest()方法（优先推荐） #

这个方法是最简洁的解决方案，它会从触发事件的元素（e.target）开始向上遍历DOM树，返回第一个匹配指定CSS选择器的祖先元素（包括元素自身）。不管你点击的是场次内的时间、剩余座位还是购物车数量标签，都能准确找到对应的场次容器。

代码示例：

// 给最外层的电影票容器绑定事件（支持动态生成的场次）
document.querySelector('.movie-tickets').addEventListener('click', function(e) {
    // 找到当前点击对应的场次容器
    const showtimeBox = e.target.closest('.tickets__showtime');
    // 如果点击的不是场次区域，直接终止逻辑
    if (!showtimeBox) return;

    // 定位到场次内的剩余座位和购物车数量标签
    const seatsLeft = showtimeBox.querySelector('span:nth-child(2)');
    const cartTickets = showtimeBox.querySelector('span:nth-child(3)');

    // 更新数值（注意先转成数字类型再计算）
    seatsLeft.textContent = parseInt(seatsLeft.textContent) - 1;
    cartTickets.textContent = parseInt(cartTickets.textContent) + 1;
});

2. 直接给div.tickets__showtime绑定事件 #

如果场次是静态渲染的（不会动态添加/删除），可以直接给每个场次容器绑定点击事件，此时this或者事件的currentTarget就是对应的div.tickets__showtime元素，无需额外查找。

代码示例：

// 获取所有场次容器
const showtimeBoxes = document.querySelectorAll('.tickets__showtime');
showtimeBoxes.forEach(box => {
    box.addEventListener('click', function() {
        // this 就是当前点击的场次容器
        const seatsLeft = this.querySelector('span:nth-child(2)');
        const cartTickets = this.querySelector('span:nth-child(3)');

        seatsLeft.textContent = parseInt(seatsLeft.textContent) - 1;
        cartTickets.textContent = parseInt(cartTickets.textContent) + 1;
    });
});

注意事项 #

• 第一种方法支持动态生成的场次（比如通过AJAX加载更多日期的场次），因为事件绑定在父容器上，新添加的场次会自动继承事件监听。
• 必须加if (!showtimeBox) return的判断，避免点击场次区域外的元素（比如标题、日期栏）时执行错误逻辑。

内容的提问来源于stack exchange，提问作者Jord van Eldik