0

いくつかの調査を通じて、クリックされたときに YouTube ビデオをターゲットとする独自のサムネイルを表示する方法を見つけました。私が直面している問題は、ページ上の別のビデオをクリックすると、同じクラスを共有しているため、対象のサムネイルだけでなく、両方のサムネイルが再生されることです。jQuery では、これを使用し、最も近い親と兄弟を使用して、クリックされている .image のみをターゲットにしようとしました。書き方が間違っているだけかもしれませんが、初心者の私には理解に苦しむところがあります。

HTML

<div class="youtube" style="display:none;">
  <iframe width="382" height="262" src="" wmode="transparent" frameborder="0" allowfullscreen></iframe>
</div>
<img src="img/example.jpg" width="382" height="262" class="image" />

jQuery

$('.image').click(function() {
  $(this).hide();
  $('.youtube').show().find("iframe").attr("src","videourl?autoplay=1");
});
4

4 に答える 4

0 
$('.image').click(function() {
  startvideo = $(this).prev();
  $(this).hide();
  startvideo.show().find("iframe").attr("src","videourl?autoplay=1");
});

これは前の要素を取り、私たちの前にhttp://jsfiddle.net/6uhyM/<img class=".image">があります<div class="youtube"> 

<img src="path/to/image.jpg" data-videourl="http://www.youtube.com/...">

$('.image').click(function() {
      url = $(this).data("videourl")
      startvideo = $(this).prev();
      $(this).hide();
      startvideo.show().find("iframe").attr("src",url);
    });
于 2013-05-06T21:03:45.793 に答える
0

これは機能しませんか？

$('.image').click(function() {
  $(this).hide();
  var iframe = $(this).prev().show().find("iframe");
  iframe.attr("src",iframe.data(url));
});

注：あなた<img class="image" />はすぐに従う必要があり<div class="youtube">ます..あなたの例のように..したがって、複数のインスタンスは次のようになります。

<div class="youtube" style="display:none;">
   <iframe width="382" height="262" src="" data-url="url-1" wmode="transparent" frameborder="0" allowfullscreen></iframe>
</div>
<img src="img/example.jpg" width="382" height="262" class="image" />

<div class="youtube" style="display:none;">
   <iframe width="382" height="262" src="" data-url="url-2" wmode="transparent" frameborder="0" allowfullscreen></iframe>
</div>
<img src="img/example.jpg" width="382" height="262" class="image" />

<div class="youtube" style="display:none;">
   <iframe width="382" height="262" src="" data-url="url-3" wmode="transparent" frameborder="0" allowfullscreen></iframe>
</div>
<img src="img/example.jpg" width="382" height="262" class="image" />
于 2013-05-06T21:03:59.777 に答える
0

チェーンをつけ続けてみません$(this)か？

$('.image').click(function() {
    $(this)
        .hide()
        .prev()
        .show()
        .find("iframe")
        .attr("src","videourl?autoplay=1");
});
于 2013-05-06T21:04:39.913 に答える
0 
<img id="1" ... class="image" />
<img id="2" ... class="image" />

$('.image').click(function() {
    var ID = $(this).attr('id');
    // Now you know what Video to play etc...
});
于 2013-05-06T21:05:17.223 に答える