1

编辑：我在 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）中。

现在彻底迷路了！

4

2 回答 2

0

您需要包围您的 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;
        });
    });
});
于 2013-02-03T20:39:31.160 回答
-2

你会想做一个 event.preventDefault(); 在您的点击函数处理程序的顶部，阻止它转到链接 URL，并更改

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

到

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

那应该解决它。

于 2013-01-29T21:34:36.063 回答