jQuery.attr工作不正常，未检索到链接

Question

这是我目前作为项目正在处理的一个页面

$(function() {
    $(".modal-launcher, #modal-background").click(function() {
        $(".modal-content, #modal-background").toggleClass("active");
        $(".vid-1i").attr("src", "link1");
        $(".vid-2i").attr("src", "link2");
        $(".vid-3i").attr("src", "link3");
        $(".vid-4i").attr("src", "link4");
        $(".vid-5i").attr("src", "link5");
        $(".vid-6i").attr("src", "link6");
        $(".vid-7i").attr("src", "link7");
        $(".vid-8i").attr("src", "link8");
       //$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
    });
});

上面的实际链接被替换，只是为了快速显示糟糕的jQuery。

在它中，我正试图创建我自己的弹出式视频启动器；然而，我在使用jQuery将iframe元素的"src替换为YouTube链接时遇到了问题。我不明白为什么jQuery不起作用。当然，我知道jQuery工作正常，是我写错了代码，但在这里，我想问是否有人能弄清楚我做错了什么，或者可以更改什么来使它工作。

由于某些原因，jQuery列表中的最后一个视频始终是检索到的视频

请理解，由于图像是本地文件而非网络位置，因此页面中缺少这些图像。无论图像是否显示，点击上面类似"Match One"的标题都会得到"预期"结果。

Answer 1

回到这里，对JavaScript和jQuery有了更多的了解，我的问题只是误解了代码。为了做这样的事情，每个链接一个函数会更合适。

function video1()
{
    $("#popup, #modal-background").toggleClass("active");
    $("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
    document.getElementById('scroll').style.cssText ='overflow:hidden';
}

互补html看起来像这样：

<div onclick="video1()"></div>

前面的代码将运行每一行，有效地将最后一个链接设置为元素的源。新代码与按钮无关，确保每个按钮只有一个链接。