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列表中的最后一个视频始终是检索到的视频。

了解页面中缺少图像，因为它们是本地文件而不是网络位置。无论图像是否显示，点击“匹配一”字样上方的字幕都会产生“预期”结果。

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>

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

jQuery .attr无法正常工作，错误检索链接

1 个答案: