CSS 多重选择器(交叉点)不工作
CSS Multi Selector (Intersection) Not working
我正在尝试使用 jquery 来切换某些类的显示属性(打开和关闭)。
我正在尝试在图像和下面的文本之间切换,以便在点击时切换
<div class="fab red off">
<img class="community_service_icon" src="http://placehold.it/50x50">
<div class="community_service_text">
Charity Run<br/>
Charity Sale<br/>
Bake Sale<br/>
Photo Exhibition<br/>
</div>
</div>
这是我的 jquery 功能:
jQuery(function($) {
$('.fab.red.off').click(function() {
$(this).removeClass( 'off' ).addClass( 'on' );
$(this).children( '.community_service_icon' ).css('display', 'none');
$(this).children( '.community_service_text' ).css('display', 'block');
});
});
jQuery(function($) {
$('.fab.red.on').click(function() {
$(this).removeClass( 'on' );
$(this).addClass( 'off' );
$(this).children( '.community_service_icon' ).css('display', 'block');
$(this).children( '.community_service_text' ).css('display', 'none');
});
});
第一次点击成功隐藏图像并显示文本,它还将类更改为 'fab red on'。但是,当我再次单击 fab div 时,它似乎使用选择器“.fab.red.off”运行第一个函数,而另一个函数未被触发。
有什么想法吗?也非常感谢任何优化此代码的建议。
干杯
好吧,当您的页面加载时,您的点击处理程序被绑定 "statically" 一次;那时只有一个元素匹配 .fab.red.off
选择器,没有元素匹配 .fab.red.on
。当您更改 类 时,事件处理程序不会重新绑定。
jQuery .on()
(http://api.jquery.com/on/) 可能就是您要找的东西。
编辑:注意 selector
参数。
您可以使用 .toggle()
简化您的代码,如果元素可见则隐藏该元素,如果不可见则显示。
jQuery(function($) {
$('.fab.red').click(function() {
$(this).find('.community_service_icon').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="fab red">
<img class="community_service_icon" src="http://placehold.it/50x50">
<div class="community_service_text">
Charity Run
<br/>Charity Sale
<br/>Bake Sale
<br/>Photo Exhibition
<br/>
</div>
</div>
使用.on()
函数如下docs
jQuery(function($) {
$(document).on('click', '.fab.red.off', function() {
$(this).removeClass( 'off' ).addClass( 'on' );
$(this).children( '.community_service_icon' ).css('display', 'none');
$(this).children( '.community_service_text' ).css('display', 'block');
});
});
jQuery(function($) {
$(document).on('click', '.fab.red.on', function() {
$(this).removeClass( 'on' );
$(this).addClass( 'off' );
$(this).children( '.community_service_icon' ).css('display', 'block');
$(this).children( '.community_service_text' ).css('display', 'block');
});
});
$('.fab.red').click(function() {
$(this).toggleClass('off');
});
.off img {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="fab red">
<img class="community_service_icon" src="http://placehold.it/50x50">
<div class="community_service_text">Charity Run
<br/>Charity Sale
<br/>Bake Sale
<br/>Photo Exhibition
<br/>
</div>
</div>
我正在尝试使用 jquery 来切换某些类的显示属性(打开和关闭)。
我正在尝试在图像和下面的文本之间切换,以便在点击时切换
<div class="fab red off">
<img class="community_service_icon" src="http://placehold.it/50x50">
<div class="community_service_text">
Charity Run<br/>
Charity Sale<br/>
Bake Sale<br/>
Photo Exhibition<br/>
</div>
</div>
这是我的 jquery 功能:
jQuery(function($) {
$('.fab.red.off').click(function() {
$(this).removeClass( 'off' ).addClass( 'on' );
$(this).children( '.community_service_icon' ).css('display', 'none');
$(this).children( '.community_service_text' ).css('display', 'block');
});
});
jQuery(function($) {
$('.fab.red.on').click(function() {
$(this).removeClass( 'on' );
$(this).addClass( 'off' );
$(this).children( '.community_service_icon' ).css('display', 'block');
$(this).children( '.community_service_text' ).css('display', 'none');
});
});
第一次点击成功隐藏图像并显示文本,它还将类更改为 'fab red on'。但是,当我再次单击 fab div 时,它似乎使用选择器“.fab.red.off”运行第一个函数,而另一个函数未被触发。
有什么想法吗?也非常感谢任何优化此代码的建议。
干杯
好吧,当您的页面加载时,您的点击处理程序被绑定 "statically" 一次;那时只有一个元素匹配 .fab.red.off
选择器,没有元素匹配 .fab.red.on
。当您更改 类 时,事件处理程序不会重新绑定。
jQuery .on()
(http://api.jquery.com/on/) 可能就是您要找的东西。
编辑:注意 selector
参数。
您可以使用 .toggle()
简化您的代码,如果元素可见则隐藏该元素,如果不可见则显示。
jQuery(function($) {
$('.fab.red').click(function() {
$(this).find('.community_service_icon').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="fab red">
<img class="community_service_icon" src="http://placehold.it/50x50">
<div class="community_service_text">
Charity Run
<br/>Charity Sale
<br/>Bake Sale
<br/>Photo Exhibition
<br/>
</div>
</div>
使用.on()
函数如下docs
jQuery(function($) {
$(document).on('click', '.fab.red.off', function() {
$(this).removeClass( 'off' ).addClass( 'on' );
$(this).children( '.community_service_icon' ).css('display', 'none');
$(this).children( '.community_service_text' ).css('display', 'block');
});
});
jQuery(function($) {
$(document).on('click', '.fab.red.on', function() {
$(this).removeClass( 'on' );
$(this).addClass( 'off' );
$(this).children( '.community_service_icon' ).css('display', 'block');
$(this).children( '.community_service_text' ).css('display', 'block');
});
});
$('.fab.red').click(function() {
$(this).toggleClass('off');
});
.off img {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="fab red">
<img class="community_service_icon" src="http://placehold.it/50x50">
<div class="community_service_text">Charity Run
<br/>Charity Sale
<br/>Bake Sale
<br/>Photo Exhibition
<br/>
</div>
</div>