Question

我有一个包含视频信息的javascript对象（title和src url）。在我的HTML中，我有图像占位符，而我正在尝试做的是当有人点击图像时，会弹出特定视频的模式弹出（twitter bootstrap模态）。我正在考虑使用HTML5的数据属性将元素的标题链接到javascript对象的标题作为参考，以便我可以在模态弹出窗口中插入正确的src url，但是当我单击图像时，我没有得到正确的网址。我在将数据属性引用到JavaScript对象中的正确src url时遇到问题。我正在努力学习，并希望对可行的解决方案有所了解。非常感谢任何帮助！

fiddle

修改我意识到for循环在最后一个对象上结束，所以当我引用srcMp4属性时，我最后得到了最后一个。所以当我点击任何一张海报时，它会引用那个值......我会继续调查...

的JavaScript

var dataCollection = {
    'videoData': [
      {
        'id'      : 0,
        'title'   : 'Badminton',
        'company' : 'Pepto Bismol',
        'gifLink' : 'http://reneinla.com/kris/gifs/BadmintonPeptoBismolCommercial.gif',
        'srcMp4'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.m4v',
        'srcWebm' : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.webm',
        'srcOgv'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.ogv',
        'poster'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.jpg'
      },
      {
        'id'      : 1,
        'title'   : 'Home Brewer',
        'company' : 'Buffalo Wild Wings',
        'gifLink' : 'http://reneinla.com/kris/gifs/BuffaloWildWingsHomeBrewer.gif',
        'srcMp4'  : 'http://reneinla.com/kris/videos/BuffaloWildWingsHomeBrewer.m4v',
        'srcWebm' : 'http://reneinla.com/kris/videos/BuffaloWildWingsHomeBrewer.webm',
        'srcOgv'  : 'http://reneinla.com/kris/videos/BuffaloWildWingsHomeBrewer.ogv',
        'poster'  : 'http://reneinla.com/kris/videos/BuffaloWildWingsHomeBrewer.jpg'
      },
      {
        'id'      : 2,
        'title'   : 'Directly to Fabulous',
        'company' : 'California Lottery',
        'gifLink' : 'http://reneinla.com/kris/gifs/CaliforniaLottoMonopolyGoDirectlytoFabulous.gif',
        'srcMp4'  : 'http://reneinla.com/kris/videos/CaliforniaLottoMonopolyGoDirectlytoFabulous.m4v',
        'srcWebm' : 'http://reneinla.com/kris/videos/CaliforniaLottoMonopolyGoDirectlytoFabulous.webm',
        'srcOgv'  : 'http://reneinla.com/kris/videos/CaliforniaLottoMonopolyGoDirectlytoFabulous.ogv',
        'poster'  : 'http://reneinla.com/kris/videos/CaliforniaLottoMonopolyGoDirectlytoFabulous.jpg'
      }
    ]
};

$(function() {
   var videos = $('#videos');
   var modalContent = $('#insert-here');

   for (var i = 0; i < dataCollection.videoData.length; i++) {
     var obj = dataCollection.videoData[i];
     // variable for poster image
     var video = obj.poster; 

     videos.append('<div class="video"><img src="' + obj.poster + '" data-title="' + obj.title + '"/></div>');
     $('.video img').click(function(){
     //modalContent.append('<video src="' + obj.srcMp4 + '"></video>');

       // debug
       alert(obj.srcMp4);
       console.log(obj.srcMp4);
     });
 }

});

HTML

<div class="container row">
   <div id="videos"></div>
</div>

// this is going to be bootstrap modal, but just as an example...
<div class="modal container">
   <div id="insert-here"></div>
</div>

Answer 1

您每次都在循环中点击.video img，这意味着视频附加的时间越长，它触发功能的次数就越多。
当循环结束时，obj指向数组中的最后一个元素，因此所有单击只会提醒最后一个视频对象，您必须创建一个函数并传递对象，所以函数可以为你保留obj。

通过这种方式，您可以将obj绑定到创建的元素，而不必逐个设置div上的所有格式。

var videos = $('#videos');
var modalContent = $('#insert-here');

var appendVideo = function(videoObj) {
    var poster = videoObj.poster;
    // Create the video element first, as we're going to listen to its img's click event.
    var video = $('<div class="video"><img src="' + poster + '" data-title="' + videoObj.title + '"/></div>');
    videos.append(video);
    video.find('img').click(function(e) {
        // Now you can access any of the type
        // like videoObj.srcWebm ... etc
        alert(videoObj.srcMp4);
        console(videoObj.srcMp4);
    });
};

for (var i = 0; i < dataCollection.videoData.length; i++) {
  var obj = dataCollection.videoData[i];
    appendVideo(obj);
}

请参阅jsfiddle

Answer 2

从for循环中删除click事件我在Fiddle下面更改了代码检查：

https://jsfiddle.net/tc6advL3/

for (var i = 0; i < dataCollection.videoData.length; i++) {
var obj = dataCollection.videoData[i];
// variable for poster image
var video = obj.poster; 
videos.append('<div class="video"><img src="' + obj.poster + '" data-title="' + obj.title + '" data-srcMp4="'+obj.srcMp4+'"/>
</div>');

}

$('.video img').click(function(){
    //modalContent.append('<video src="' + obj.srcMp4 + '"></video>');
    alert($(this).attr("data-srcMp4"));
    console.log(obj.srcMp4);
});

Answer 3

问题出在你的循环中。您的点击事件在循环内触发。因此每次循环到达下一个图像时它都会被覆盖。我已经更新了你的小提琴。通过在代码中添加额外的更改。见下文，

for (var i = 0; i < dataCollection.videoData.length; i++) {
  var obj = dataCollection.videoData[i];
    // variable for poster image
    var video = obj.poster; 
    videos.append('<div class="video"><img src="' + obj.poster + '" data-title="' + obj.title + '" data-srcmp="'+obj.srcMp4+'"/></div>');

}

 $('.video img').click(function(){
        //modalContent.append('<video src="' + obj.srcMp4 + '"></video>');
        alert($(this).data("srcmp"));
        console.log($(this).data("srcmp"));
    });

fiddle

Answer 4

将您的事件分配移到循环之外 - 您将多次分配事件给与您的选择器匹配的所有元素。
在您的事件处理程序中，您可以使用所点击的项目的数据来显示正确的视频。

更新代码：

var dataCollection = {
    'videoData': [...]
};

$(function() {
  var videos = $('#videos');
  var modalContent = $('#insert-here');

  for (var i = 0; i < dataCollection.videoData.length; i++) {
    var obj = dataCollection.videoData[i];
    // variable for poster image
    var video = obj.poster;
    videos.append('<div class="video"><img src="' + obj.poster + '" data-title="' + obj.title + '" data-srcMp4="' + obj.srcMp4 + '" /></div>');

  }

  $('.video img').click(function(){
    modalContent.empty().append('<video src="' + $(this).data().srcmp4 + '"></video>');
  });

});

JSFiddle：https://jsfiddle.net/mc939cqt/

Answer 5

似乎你需要创建一个函数，在给定标题的情况下迭代该对象。

function getVideoByTitle(dataCollection, title) {
    for (var i = 0; i < dataCollection.videoData.length; i++) {
        var obj = dataCollection.videoData[i];
        if (obj.title == title) {
            //Do whatever you need to do with the data
        }
    }
    //here you should make sure that you handle for a case where there was something wong
}

您还需要创建on click事件以将信息发送到该功能。

$('.video img').each(function () {
    var $this = $(this);
    $this.on("click", function () {
       getVideoByTitle(dataCollection, $(this).data('title'));
    });
});

我没有把它插入你的小提琴中进行测试，但我认为这个想法可能会让你走上正确的道路。

Answer 6

我认为事件体中无法访问obj变量。以下代码将对象绑定到一个元素：

$('.video img').data('video', obj);

并通过以下代码访问该对象：

$('.video img').click(function(){
    //modalContent.append('<video src="' + obj.srcMp4 + '"></video>');
    alert($(this).data('video').srcMp4);
});

单击时从javascript对象动态加载数据

6 个答案: