单击时隐藏div类

时间:2016-08-08 03:32:50

标签: javascript jquery html

我有一些视频列表,我想在点击它时隐藏它的类。这是它的示例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/

2 个答案:

答案 0 :(得分:1)

您可以在元素上绑定多击事件: e.g。

$('.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()
})

答案 1 :(得分:0)

我不确定我是否完全理解你的问题,但是

在点击时隐藏div应该就像

一样简单
import React from 'react';
import styles from './Avatar.less';
import { Input } from 'antd';

var typed = '';

function changed(e){
    console.log(typed);
    typed = e.target.value;
}

const Avatar = () => {
  return (
    <div className={styles.normal}>
     <span>{typed}</span>
     <Input onChange={changed.bind(this)} placeholder="text in" />
    </div>
  );
};

export default Avatar;

在单击div时删除一个类可以通过

完成
 node('slave'){
 git clone github.com/owner/abc.git -b ${env.BRANCH_NAME}
 git clone github.com/owner/def.git -b ${env.BRANCH_NAME}
 git clone github.com/owner/ghi.git -b ${env.BRANCH_NAME}
 }

当然你需要将“.class-of-div-is-clicked”和“class-of-div-that-gets-hidden”等改为适当的名称