“show me”元素在点击时会产生 showHide 效果。 iframe 仅在网页呈现后加载,这使得网站在其大小方面更有效率。但是它只适用于一个 div。从技术上讲,我可以使用不同的类名在各处复制和粘贴相同的函数,但这会使我的代码非常草率且效率低下。我想完成的事情:
- 在每个 div 元素中使用不同的 YT 视频在页面的多个位置执行相同的 showHide 效果
- 在页面呈现后仍然能够加载内容
HTML:
<div class="#">
<a href="#" id="show_me"><i class="icon fa fa-fw fa-angle-down"></i>
<span>Show</span> Me</a>
<div id="i_frame"></div>
</div>
JS:
$(document).ready(function(){
$("#show_me").click(function(e){
e.preventDefault();
if ($(this).is(".opened") ) {
$(this).removeClass("opened").find(".icon").removeClass("fa-angle-up").addClass("fa-angle-down").parent().find("span").text("Show");
$("#i_frame").hide().html("");
} else {
$(this).addClass("opened").find(".icon").removeClass("fa-angle-down").addClass("fa-angle-up").parent().find("span").text("Hide");
$("#i_frame").show().html("<iframe width='100%' height='315' src='https://www.youtube.com/embed/#' frameborder='0' allowfullscreen></iframe>");
}
});
});
CSS:
#i_frame {
display: none;
}
最佳答案
通过使用类和 DOM 遍历来查找元素,使您的代码更加模块化。
您还可以通过数据属性为每个 iframe 等分配不同的视频。
$(document).ready(function() {
$(".show_me").on('click', function(e) {
e.preventDefault();
$(this).toggleClass('opened')
.find('.icon')
.toggleClass('fa-angle-up fa-angle-down')
.end()
.find('span')
.text(function(_, txt) {
return txt === 'Show' ? 'Hide' : 'Show';
});
var iframeEl = $(this).closest('.parent').find('.i_frame');
if (iframeEl.toggle().find('iframe').length === 0) {
var iframe = $('<iframe />', {
width : '100%',
height : '315',
src : iframeEl.data('yt'),
frameborder : '0',
allowfullscreen : 'true'
}).appendTo(iframeEl)
}
});
});
.i_frame {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<a href="#" class="show_me"><i class="icon fa fa-fw fa-angle-down"></i><span>Show</span> Me</a>
<div class="i_frame" data-yt="https://www.youtube.com/embed/9bZkp7q19f0"></div>
</div>
<div class="parent">
<a href="#" class="show_me"><i class="icon fa fa-fw fa-angle-down"></i><span>Show</span> Me</a>
<div class="i_frame" data-yt="https://www.youtube.com/embed/FrG4TEcSuRg"></div>
</div>
关于javascript - 在每个 div 元素中使用不同的 YT 视频在页面的多个位置执行相同的 showHide 效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39980411/