Javascript 使用jquery和数据属性将内容加载到div中

编辑：我在www.dnadigitaltv.co.uk/testing/video上安装了这个，但我就是无法让它工作。我尝试了不同版本的jquery，编辑了代码，尝试了其他版本，但就是无法让它工作。为什么它可以在JSFIDLE中工作，但不能在我的网站上工作

我有一个视频页面，它使用modX视频列表器。我的实现工作得很好，但我真正想做的是，当单击链接时，它会将图像和描述加载到相关的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>

Lorem Ipsum美元网站amet。Lorem Ipsum美元网站amet。乱数假文
美元网站amet

00:21:15

然后我有以下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;
});
});

$（'div.vidTitle a'）。每个（函数（）{
$（此）。单击（函数（）{
var datasrc=$（this.parents（'div.listing'）；
$（'#vidDescription'）.empty（）.prepend（''+$（datasrc.data（'description'）+'
'）；
$（'#vidImage'）.empty（）.prepend（''+$（datasrc.data（'image'）+'
'）；
返回false；
});
});

因此，当您单击视频标题时，它会获取数据图像和数据描述的内容，并将其显示在2个分区（vidImage和vidDescription）中

---

现在完全迷路了

您需要执行一个事件。preventDefault（）；在函数处理程序的顶部，单击以阻止它转到链接URL，然后更改

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

到

---

这应该可以解决问题。

您需要包围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;
        });
    });
});

jQuery（函数（）{
$（'div.vidTitle a'）。每个（函数（）{
$（此）。单击（函数（）{
var datasrc=$（this.parents（'div.listing'）；
$（'#vidDescription'）.empty（）.prepend（''+$（datasrc.data（'description'）+'
'）；
$（'#vidImage'）.empty（）.prepend（''+$（datasrc.data（'image'）+'
'）；
返回false；
});
});
});

父母将工作。。唯一的问题是它将使用类listingand.closest（）查找所有祖先div，并使用选择器获取它找到的第一个祖先。。。这就是作者想要的。不知道你为什么要这样对我说。即使使用.closest，它仍然会打开youtube链接.event.preventDefault（）；在click事件处理程序顶部调用将阻止链接打开。@Derek这现在真的很奇怪：（event.preventDefault（）；也不工作。我在[link]有一个完整的实现，其中的代码在JSFIDLE中工作。我想这一定是jquery链接不正确的问题，但它是：（代码和标记看起来不错。请确保您的jquery版本支持html5数据属性。您是否有多个相同的ID？您的代码在这里似乎工作正常这很奇怪！我认为这一定是jquery版本的问题，所以我下载了最新的1.9版本并试用了它，但它仍然跟随youtube的链接。@wirey谢谢你的帮助。我用最新版本的jQuery在这里快速上传了代码[link]，它仍然跟随youtube的链接。很奇怪

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