使用 .html() 使用 jQuery 在 src 属性 HTML5 中插入变量答案

【问题标题】：Inserting variable inside src attribute HTML5 with jQuery using .html()使用 .html() 使用 jQuery 在 src 属性 HTML5 中插入变量
【发布时间】：2014-02-05 16:18:29
【问题描述】：

我想在 iframe 的源代码中插入一个变量，以使用 .html 插入另一个元素的 href。问题在于有单引号和双引号。我试过了，但变量被视为一个字符串。让 JS 文件将其作为变量读取的正确方法是什么？

具体变量为videoUrl。

var newsVideoLink = $('.js-item-video-link');
var videoUrl = newsVideoLink.attr('href');

newsVideoLink.on('click', function(event){
    event.preventDefault();
    newsVideoContainer.css({
        position: 'absolute',
        'z-index': '1',
        top: '0',
        left: '0'
    })
    .animate({
        width: '100%'
    }, 150)
    .html('<iframe src=\"videoUrl\"' +
        ' frameborder="0" allowfullscreen></iframe>');
    newsItemClose.css({
        'z-index': '2',
        top: '-10px',
        right: '-540px',
        'font-size': '1em'
    });
});

【问题讨论】：

标签： javascript jquery html variables href

【解决方案1】：

只需使用字符串连接：

.html('<iframe src="' + videoUrl '" +

【讨论】：

【解决方案2】：

您需要为 iframe 拆分字符串：

var newsVideoLink = $('.js-item-video-link');
var videoUrl = newsVideoLink.attr('href');

newsVideoLink.on('click', function(event){
    event.preventDefault();
    newsVideoContainer.css({
        position: 'absolute',
        'z-index': '1',
        top: '0',
        left: '0'
    })
    .animate({
        width: '100%'
    }, 150)
    .html('<iframe src=\"' + videoUrl + '\"' +
            ' frameborder="0" allowfullscreen></iframe>');
    newsItemClose.css({
        'z-index': '2',
        top: '-10px',
        right: '-540px',
        'font-size': '1em'
    });
});

试试这个。

【讨论】：