0

jqueryを使用してHTMLマークアップを作成しようとしています。

<div class="icon"></div>

YouTubeビデオがページに存在する場合は、上記のマークアップを作成します。

if ($('div.container iframe').length) {
  alert('frame exists');
  $('<div class="icon"></div>');
}

ただし、マークアップは作成されません。ユーザーにYouTubeビデオを貼り付けてもらいたいのですが、Jqueryが自動的にアイコンを作成する必要があります。私の実装を見てください：

var $video = $('div.container iframe');  //location of video
var $productImage = $('.product-image'); //location of main prod img
var $icon = $('.icon');                  //location of icon

//check if video exists
if ($('div.container iframe').length) {
    alert('frame exists');
  $('<div class="icon"></div>');

}

$('.product-image').append($video);      //append the video to the main prod img

$icon.on('click', function() {           //click
    $video.toggle();                     //toggle the video based on click
});

JSFIDDLE： http ://jsfiddle.net/t7qMF/7/ ソリューション： http： //jsfiddle.net/t7qMF/13/

4

2 に答える 2

8

最初にiframeが存在するかどうかを確認し、存在する場合はappendアイコンdiv-

if ($('div.container iframe').length > 0) {
    alert('frame exists');
    $('.container').append('<div class="icon">Icon</div>');
}

更新されたフィドル-http://jsfiddle.net/t7qMF/11/

于 2012-07-13T10:07:24.763 に答える
0

$('<div class="icon"></div>');マークアップを作成しますが、どこにも配置しません。それを何かに追加すれば、うまくいくはずです。

于 2012-07-13T10:04:32.283 に答える