Javascript 为什么jquery要连接字符串两次？

我正在尝试在点击按钮（

.playbutton

）后播放嵌入式Youtube视频

视频作为

iframe

嵌入名为

#youtubecontainer

的

div

中

实现这一点的最简单方法是将“

？autoplay=1

”附加到

iframe

的

src

属性。（我知道有一个API，但现在我需要这样做。）

我的HTML代码如下

<div class="playbutton">
    <img class="playicon">
</div>

<div id="youtubecontainer">
    <iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520" frameborder="0" allowfullscreen></iframe>
</div>

但是，这会将“？autoplay=1”附加到src两次，因此其内容如下，并且失败：

<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520?autoplay=1?autoplay=1" frameborder="0" allowfullscreen=""></iframe>

---

知道为什么吗？

尝试在添加自动播放之前替换它。因为当您再次单击它时，您再次添加了以前仍然存在的

？autoplay=1

工作

$("#youtubecontainer iframe").attr('src', $("#youtubecontainer iframe").attr('src').replace(/\?autoplay=1/, "") + '?autoplay=1');

---

您可以尝试在

单击
事件之前保存
iframe
的原始
src
：

var source;
$(function() {
    //This controls YouTube playback via button
    source = $("#youtubecontainer iframe").attr('src');
    $('.playbutton').click(function() {
        $("#youtubecontainer iframe").attr('src', source + '?autoplay=1');
    });
});

工作小提琴：
可能是在第二次单击之后？@scimonester我调用了我的脚本文件两次。这让我想起来了！请记住，大多数方法也接受函数。这样做会更好，减少DOM和方法调用
.attr（'src'，function（）{返回this.src.replace（'？autoplay=1'，''）+'？autoplay=1'；}）我调用脚本文件两次。这让我想起来了！有了这个，我刚刚补充了一个答案，现在你可以控制它了。
var source;
$(function() {
    //This controls YouTube playback via button
    source = $("#youtubecontainer iframe").attr('src');
    $('.playbutton').click(function() {
        $("#youtubecontainer iframe").attr('src', source + '?autoplay=1');
    });
});