Question

编辑：我在www.dnadigitaltv.co.uk/testing/video安装了这个，但我无法让它正常工作。我已经尝试了不同版本的jquery，编辑了代码，尝试了替代版本但却无法使其工作。为什么它会在jsfiddle中运行而不在我的网站上运行？

我有一个使用modX vidlister的视频页面。我的实现工作得很好，但我真正想做的是点击链接时会将图像和描述加载到相关的div中。

我一直在尝试使用数据属性，因为我的网站是html5，但我无法让它工作。目前我有这个HTML。

<div id="vidImage"></div>
<div id="vidDescription"></div>
<div class="listing" data-image="SampleImage" data-description="Sample Description">
  <div class="vidTitle">
    <a href="http://www.youtube.com/watch?v=GDvI8UaxT9M" title="Sample   Video Title">Sample Video</a>
  </div>
  <div class="vidDescription">
    <p>Lorem Ipsum dollar site amet. Lorem Ipsum dollar site amet. Lorem Ipsum
      dollar site amet.</p>
  </div>
  <div class="vidDuration">
    <p>00:21:15</p>
  </div>
  <div class="clearBoth"></div>
</div>

然后我有以下jQuery

$('div.vidTitle a').each(function(){
$(this).click(function(){
    var datasrc = $(this).parents('div.listing');
    $('#vidDescription').empty().prepend('<p>' + $(datasrc).data('description') + '</p>');
    $('#vidImage').empty().prepend('<p>' + $(datasrc).data('image') + '</p>');
    return false;
});
});

所以我的想法是，当你点击视频标题时，它会获取数据图像和数据描述的内容，并在2个div（vidImage和vidDescription）中显示它。

现在完全迷失了！

Answer 1

你需要包围你的jQuery，以便它在加载DOM后执行

jQuery(function() {
    $('div.vidTitle a').each(function(){
        $(this).click(function(){
            var datasrc = $(this).parents('div.listing');
            $('#vidDescription').empty().prepend('<p>' + $(datasrc).data('description') + '</p>');
            $('#vidImage').empty().prepend('<p>' + $(datasrc).data('image') + '</p>');
            return false;
        });
    });
});

Answer 2

你想要做一个event.preventDefault（）;在单击函数处理程序的顶部，以阻止它转到链接URL，并更改

var datasrc = $(this).parents('div.listing');

到

var datasrc = $(this).closest('div.listing');

那应该解决它。

使用jquery和data属性将内容加载到div中

2 个答案: