javascript - 在 JavaScript 中，来自 li 元素的 getAttribute 部分起作用

Question

我在底部的 Js 代码对于第一个链接正常工作，但对于第二个链接却不能正常工作，即使我刷新页面它也只对第一个链接有效，知道如何解决这个问题吗？谢谢。

<div class="container">
    <div class="list">
        <li><a data-video="https://www.youtube.com/embed/PkZNo7MFNFg" href="#">Vido 1</a></li>
        <li><a data-video="https://www.youtube.com/embed/7bE2mI4ePeU" href="#">Vido 2</a></li>
        <br>
        <br>
    </div>
    <div class="vid">
        <iframe id="videos" width="760" height="415" style="background: #ccc;" src="" frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>
    </div>
</div>

<script>
    let clicked = document.querySelector('a').getAttribute('data-video');
    document.querySelector('a').addEventListener('click', () => {
        document.querySelector('iframe').src = clicked;
    });
</script>

Answer 1

querySelector()

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

你更需要 querySelectorAll

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

你需要后一个循环，事件处理程序也应该处理事件来决定点击了什么:

document.querySelectorAll('a').forEach(item => item.addEventListener('click',
    event => document.querySelector('iframe').src = event.target.getAttribute('data-video')
));

演示(它只显示文本，因为这些片段在这里被严重沙盒化)

document.querySelectorAll('a').forEach(item => item.addEventListener('click',
    event => document.querySelector('.vid').innerText = event.target.getAttribute('data-video')
));

<div class="container">
    <div class="list">
        <li><a data-video="https://www.youtube.com/embed/PkZNo7MFNFg" href="#">Vido 1</a></li>
        <li><a data-video="https://www.youtube.com/embed/7bE2mI4ePeU" href="#">Vido 2</a></li>
        <br>
        <br>
    </div>
    <div class="vid">
    </div>
</div>