jquery - 如何使用jquery动态地将url从json数据传递到div？

Question

我有 json 文件，其中包含几个视频的 id 和 url。现在我应该从 json 文件中读取 url 并将其传递给 div src。通过单击 div 本身，视频应该加载到另一个 div 中。

下面提到的是我的 html，我在其中读取 json 数据并附加到“href”

<div class="div1" style="padding-left:inherit">
<div href="#">
</div>
</div>

现在，我需要将 href 从此 div 传递到下面的 src，

<iframe id="videoplayerDiv" src="" scrolling="no" frameborder="no" align="center" height="100%" width="100%" allowfullscreen></iframe>

添加 src 的脚本是，

$(document).ready(function () {
    $.getJSON('/video.json', function (data) {
        $('.div1').click(function (el) {
            $("#videoplayerDiv").attr("src", $(this).attr(url));
        });
    });
});

谁能帮忙解决这个问题吗？

Answer 1

假设你的 json 类似于下面的内容。

var jsonData=[{id:1,"url":"www.youtube.com"},{id:2,"url":"www.youtube.com/1"}];
$(document).ready(function () {
$.getJSON('/video.json', function (data) {
    if(data){
       data.forEach(function(i,o){
           var _div=$("<div/>",{id:o.id});
           _div.attr("url",o.url);
           _div.on('click',function(){
                $("#videoplayerDiv").attr("src", $(this).attr("url"));
           });
           $("#div1").append(_div)
       });
      }

   });
});

和你的html

<div class="div1" id='div1' style="padding-left:inherit"></div>