Question

当用户将鼠标悬停在缩略图列表上时，我正在使用CSS创建弹出窗口。这将为发布的每个缩略图显示不同的YouTube视频，我已经有了它。问题是当我将鼠标移动到其他地方以便它可以隐藏弹出窗口时，视频会在后台继续播放。另一个问题是，当我访问所有带缩略图的帖子的页面时，它似乎是在后台加载所有YouTube视频，导致它减慢我的页面速度。我希望它只在悬停在缩略图上时加载并卸载，这样一旦我将鼠标悬停在弹出窗口之外，视频就会停止播放。我对jquery不太了解，但我尝试了这段代码，我猜它是这样的，我需要...

<script type="text/javascript">
/* The first line waits until the page has finished to load and is ready to manipulate */
$(document).ready(function(){

    if ($('#vidthumbnail').is(':visible')) {
        $('#vidthumbnail').show();
    }


     if ($('#vidthumbnail').empty(':visible')) { 
        $('#vidthumbnail').hide();
    }

});
</script>

这就是弹出窗口中的内容

       <a id="vidthumbnail" href="#thumb"><img src="thumb.gif"/>
         <span>
            <div id="vidthumbnail">
            **the youtube embedded code goes here, every post with unique id** 
           </div>
         </span>
   </a>

Answer 1

您可以使用$('div').html('some html')将一些html设置为div，并$('div').html('')将其清除。

$(document).ready(function(){

    if ($('#vidthumbnail').is(':visible')) {
        $('#vidthumbnail').html('format youtube code here')
                          .show();
    }


     if ($('#vidthumbnail').empty(':visible')) { 
        $('#vidthumbnail').hide().html(''); // remove anything
    }

});

或者，如果您的div元素的内容应该从某处加载，请使用$('div').load(url_goes_here)

使用Jquery加载和卸载Div元素

1 个答案: