我有一些视频列表,我想在点击它时隐藏它的类。这是它的示例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/
答案 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”等改为适当的名称