javascript - 单击时隐藏 div 类

Question

我有一个视频列表，我想在单击它时隐藏它的类别。这是它的示例 html 输出。

<div id="primary-video">
    <iframe id="video" width="100%" height="auto" src="https://www.youtube.com/embed/test" frameborder="0" allowfullscreen=""></iframe>
    <div class="primary-video-details-wrap">
        <div class="primary-videotitle ">Primary title</div>
        <div class="primary-videodatepublished"> Published on Jul 15, 2016</div>
        <div class="primary-videodescription"> testing</div>
        <div class="comment-wrap">
            <div class="fb-comments fb_iframe_widget_loader fb_iframe_widget fb_iframe_widget_fluid fb_hide_iframes" id="fb-comment" data-href="https://facebook.com/test/posts/test" data-width="100%" data-numposts="10" fb-xfbml-state="rendered"><span style="height: 100px;">
                <iframe style="border: none; overflow: hidden; height: 100px; width: 100%;"></iframe>
                </span></div>
        </div>
    </div>
</div>
<div id="video-list">
<div class="video-list-wrapper" style="display: block;">
    <div class="video-wrap">
        <div class="left-video-info"><a href="#null"><img src="https://i.ytimg.com/vi/hqdefault.jpg" alt="Video" width="100%" height="auto"></a><span class="video-duration">10:03</span></div>
        <div class="right-video-info">
            <div class="video-title">The video 1</div>
            <div class="video-date">24 days ago</div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="video-list-wrapper" style="display: block;">
    <div class="video-wrap">
        <div class="left-video-info"><a href="#null"><img src="https://i.ytimg.com/vi/hqdefault.jpg" alt="Video" width="100%" height="auto"></a><span class="video-duration">05:19</span></div>
        <div class="right-video-info">
            <div class="video-title">The video 2</div>
            <div class="video-date">25 days ago</div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="video-list-wrapper" style="display: block;">
    <div class="video-wrap">
        <div class="left-video-info"><a href="#null"><img src="https://i.ytimg.com/vi/hqdefault.jpg" alt="Video" width="100%" height="auto"></a><span class="video-duration">05:52</span></div>
        <div class="right-video-info">
            <div class="video-title">The video 3</div>
            <div class="video-date">25 days ago</div>
        </div>
    </div>
    <div class="clear"></div>
</div>

当类left-video-info上已有点击功能时，如何隐藏它

点击功能是更改主视频和详细信息。

$('.left-video-info').on('click',function(event){
  var rownum = $(this).index('.left-video-info');

 $('#video').attr('src','https://www.youtube.com/embed/'+video_information_array[rownum].video_info_link);
$('#fb-comment').attr('data-href','https://facebook.com/test/'+video_information_array[rownum].video_info_fb);
                          $(primary_published).text(video_information_array[rownum].video_info_date);
                      $(primary_des).text(video_information_array[rownum].video_info_description);
                      $(primary_title).text(video_information_array[rownum].video_info_title);

         $(".page-content").animate({ scrollTop: 0 }, 400);
           return false;
}); 

更新问题:我忘记包含“加载更多”按钮的功能:我单击的类被隐藏(很好)，但是当我单击“加载更多”功能时。隐藏类会再次出现。有没有办法，除非重新加载页面，否则它不会出现？这是工作中的 jsfiddle:http://jsfiddle.net/xkevin/h2hegehv/

Answer 1

您可以在元素上绑定(bind)多次单击事件:例如

$('.left-video-info').on('click', function(){
    //TO DO #1
}).on('click', function(){
    //TO DO #2
}).on('click', function(){
    //hide self
    $(this).hide() // or $(this).toggle();
    //hide parent 
    $(this).closest('.video-list-wrapper').hide()
})