Question

我想做什么：

动态构建附加到img标记的onclick事件并传递3个值。问题是onclick在循环内，因此传递值的值会根据它们在循环中的位置而改变。

我已经设法通过将其附加到img id来传递一个值，但我不知道如何传递其他两个

newElement.innerHTML = '<img id="'+ id + '" class="Videoimg" onclick="myFunction(this.id,\"" + VideoTitlePlayer + "\","' + VideodescPlayer + '")" src="' + thumbnail +'"><div id="VideoNames" class="VideoTitle">'+ title +'<br><div class="VideoDescription">' + desc + '</div></div>';

好的，这就是问题调用此函数来构建YouTube视频菜单

$.each(playlistVideoItems, function (index, item) 
            {
            displayVideoResult(item.snippet, item.snippet.resourceId.videoId);
            });

function displayVideoResult(videoSnippet, VideoPlay) 
{ var title = videoSnippet.title;
var desc = videoSnippet.description;
var thumbnail = videoSnippet.thumbnails.default.url;
var id = VideoPlay;

var newElement = document.createElement("div");
newElement.setAttribute("class", "VideoContainerCSS");
    // Set the value to what you want
  newElement.innerHTML = '<img id="'+ id + '" class="Videoimg" onclick="myFunction(this.id)" src="' + thumbnail +'"><div id="VideoNames" class="VideoTitle">'+ title +'<br><div class="VideoDescription">' + desc + '</div></div>';

document.getElementById("results").appendChild(newElement);
}

我需要一些方法来构建视频ID，视频标题和视频desc的链接，所以当点击img链接时，它将所有3传递给运行youtube api的函数

Answer 1

由于你有jQuery，你可以避免使用onclick并使用jQuery选择器和事件处理程序。

创建元素后，使用jQuery选择器捕获它们。更好的是，在使用委托事件样式的容器上使用一个。

但是，您可能需要更改标记以获取字符串。

$('.container').on('click', 'img', function(e) {
  var $el = $(this);
  myFunction(this.id, $el.find('.VideoTitle').text(), $el.find('. VideoDescription').text());
});

使用此格式，您可以创建一个支持所有元素的事件处理程序。

Answer 2

只需使用data-id，data-video-title，data-other-prop等，然后onclick="myFunction(this.dataset, ...

在循环中构建onclick Javascript / jquery

2 个答案: