Jquery CSS多选择器（交叉点）不工作

我试图使用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>

第一次单击成功隐藏图像并显示文本，它还将类更改为“fab redon”。但是，当我再次单击fab div时，它似乎使用选择器“.fab.red.off”运行第一个函数，而另一个函数没有被触发

有什么想法吗？任何关于优化此代码的建议都将受到高度赞赏

---

干杯

好吧，当你的页面加载时，你的点击处理程序被“静态”绑定一次；此时，有一个元素匹配

.fab.red.off

选择器，没有元素匹配

.fab.red.on

。更改类时，不会重新绑定事件处理程序

jQuery

.on（）

（）可能就是您要寻找的东西

---

编辑：注意选择器的参数。

好的，当你的页面被加载时，你的点击处理程序被“静态”绑定一次；此时，有一个元素匹配

.fab.red.off

选择器，没有元素匹配

.fab.red.on

。更改类时，不会重新绑定事件处理程序

jQuery

.on（）

（）可能就是您要寻找的东西

---

编辑：请注意选择器参数。

您可以使用简化代码，如果元素可见，则隐藏该元素，如果元素不可见，则显示该元素

jQuery（函数（$）{
$（'.fab.red'）。单击（函数（）{
$（this.find（'.community\u service\u icon'）.toggle（）；
});
});

慈善跑

慈善义卖

烘焙销售

图片展


您可以使用简化代码，如果元素可见，则隐藏该元素；如果元素不可见，则显示该元素


jQuery（函数（$）{
$（'.fab.red'）。单击（函数（）{
$（this.find（'.community\u service\u icon'）.toggle（）；
});
});

慈善跑

慈善义卖

烘焙销售

图片展


使用
.on（）
函数如下

使用
.on（）
函数如下


$（'.fab.red'）。单击（函数（）{
$（this.toggleClass（'off'）；
});
.off img{
显示：无；
}

慈善跑

慈善义卖

烘焙销售

图片展



$（'.fab.red'）。单击（函数（）{
$（this.toggleClass（'off'）；
});
.off img{
显示：无；
}

慈善跑

慈善义卖

烘焙销售

图片展


您不只是使用.show（）和.hide（）的任何特定原因？我使用了.show和.hide，但我注意到它是在内联添加css样式，我不希望这样做。如果我错了，请更正。您不只是使用.show（）和.hide（）？我使用了.show和.hide，但我注意到它添加了css样式内联，我不希望这样做。如果我错了，请纠正我没有问这个问题，因为我是一个拥有超过10万声誉的老用户，你应该看看谁是OP。感谢你解决了这个问题，同时简化了芯片：）也感谢你的支持本杰明！普通人我没有问这个问题，作为一个拥有超过10万声誉的老用户，你应该看看谁是OP。感谢你解决了这个问题，同时简化了芯片：）也感谢你的支持本杰明！
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');
  });
});

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');
  });
});