Question

我正在使用youtube api搜索视频。信息在与youtube页面布局类似的页面上完美显示。我有一个功能，当单击每个div时，它将创建一个iframe固定到页面顶部播放被点击的视频，但我的问题是使该功能仅适用于单击的div。我知道如果我把这个函数放在iframe函数注释下它将为每个对象创建一个iframe，所以如果maxResults是10，它将创建10个iframe。我如何进行这样的功能只能从点击的视频获取videoId并使用它来制作iframe？我已尝试使用此并使用可变范围但没有运气

$.get(
    "https://www.googleapis.com/youtube/v3/search", {
    q: q,
    part: 'snippet',
    maxResults: 10,
    forUserName: '',
    key: key},
    function (data){

         for (var i = 0; i < data.items.length; i++) {

            var qImg = data.items[i].snippet.thumbnails.medium.url;
            var qtitle = data.items[i].snippet.title;
            var qId = data.items[i].id.videoId;
            var x = qId;
            var output = "<li  class='flex-1'><div class='gridfront' style='background-image: url("+qImg+")'><p class='qtitle'>"+qtitle+"</p></div><div class='gridback'><p>"+data.items[i].snippet.description+"</p><span>"+data.items[i].snippet.channelTitle+"</span></div></li>";
            $('#youtube-container').append(output);

                //iframe function


         }
         $('.flex-1').on('click', function (e) {
            var ifrm = document.createElement("iframe");
                document.body.appendChild(ifrm);
                ifrm.id = "video"; 
                $('#video').attr("src", "https://www.youtube.com/embed/"+qId);
                $('#video').attr("allowfullscreen", true);
                $('#video').attr("frameborder", 0);
         })
    }
);

Answer 1

您可以将.one()替换为.on()，为每个.flex-1元素最多调用一次点击处理程序; class id iframe id "video"，以防止在document中设置重复的qId click。

修改，更新

此外，单击处理程序中未定义for;您应该能够在var output = "<li class='flex-1'><div class='gridfront' style='background-image: url("+qImg+")'><p class='qtitle'>"+qtitle+"</p></div><div class='gridback'><p>"+data.items[i].snippet.description+"</p><span>"+data.items[i].snippet.channelTitle+"</span></div></li>"; $(output).one('click', function (e) { var ifrm = document.createElement("iframe"); document.body.appendChild(ifrm); ifrm.className = "video"; $('#video').attr("src", "https://www.youtube.com/embed/"+qId); $('#video').attr("allowfullscreen", true); $('#video').attr("frameborder", 0); }) $('#youtube-container').append(output);循环

中附加

var ul = $("ul")

for (var i = 0; i < 10; i++) {
  ul.append("<li class=flex-1><div>" + i + "</div></li>")
}

$(".flex-1").one("click", function() {
  alert($(this).index())
})

个事件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<ul>
</ul>

NullPointerException

Button nextBtn

仅针对for循环中的clicked元素运行的javascript函数

1 个答案: