Question

我有一个JS函数，用Youtube iFrame替换父节点：

function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=1&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    iframe.setAttribute("width", "100%");
    iframe.setAttribute("allowFullscreen", "1");
    this.parentNode.replaceChild(iframe, this);
}

我在页面加载时动态创建div，它具有运行上述函数的onclick属性：

(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();

到目前为止，这么好。但我试图添加一个额外的图标，调用函数labnolIframe并遇到困难：

$('.play-icon').click(function(){
   labnolIframe();
});

当我点击.play-icon时，我想运行用youtube iframe替换父div的代码。但是我发现上面函数中的“this”并不是指DOM中的“this”元素（不像我在第一个例子中所说的那样）。

如何更改我的代码，使其在最后一个示例中引用“this”？

Answer 1

要在this元素上调用click函数，在调用替换函数时使用其this父节点的值，可以使用Function.prototype.call方法指定{{ 1}}需要的值。如果我有正确的话，这就是父节点：

$('.play-icon').click(function(){
   labnolIframe.call( this.parentNode); 
});

Answer 2

为了从this访问.play-icon对象，您需要直接在labnolIframe事件上调用函数click，而不是在{{1}内调用它事件。

更改：

click

到：

$('.play-icon').click(function(){
   labnolIframe();
});

以下是一个示例：https://jsfiddle.net/DinoMyte/d36k2L3c/7/

JS函数：无法读取未定义

2 个答案: