1

編集: これを www.dnadigitaltv.co.uk/testing/video にインストールしましたが、うまく動作しません。jquery のさまざまなバージョンを試し、コードを編集し、代替バージョンを試しましたが、うまくいきません。jsfiddle では機能するのに、私の Web サイトでは機能しないのはなぜですか?

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

つまり、ビデオ タイトルをクリックすると、data-image と data-description のコンテンツが取得され、2 つの div (vidImage と vidDescription) に表示されます。

もう完全に失われました！

4

2 に答える 2

0

DOMがロードされた後に実行されるようにjQueryを囲む必要があります

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 に答える