javascript - 在循环内构建 onclick Javascript/jquery

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);
}

我需要某种方法将 videoID、视频标题和视频 desc 构建到链接中，这样当单击 img 链接时，它会将所有 3 个参数传递给运行 youtube api 的函数

Answer 1

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

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

不过，您可能需要稍微更改标记才能获取字符串。

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

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