javascript - 在每个 div 元素中使用不同的 YT 视频在页面的多个位置执行相同的 showHide 效果

Question

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

https://jsfiddle.net/jeremykenedy/fkcnncjm/

Answer 1

通过使用类和 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>