0

我正在尝试使用 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”运行第一个函数，而另一个函数没有被触发。

有任何想法吗？并且非常感谢任何优化此代码的建议。

干杯

4

4 回答 4

4

您可以使用 简化代码.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>

于 2015-01-05T07:43:16.350 回答
1 

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

于 2015-01-05T07:47:25.187 回答
0

好吧，当您的页面加载时，您的点击处理程序被“静态”绑定一次；那时有一个元素匹配.fab.red.off选择器，没有元素匹配.fab.red.on。当您更改类时，事件处理程序不会重新绑定。

jQuery .on()( http://api.jquery.com/on/ ) 可能是您正在寻找的东西。

编辑：注意selector参数。

于 2015-01-05T07:42:18.797 回答
0

使用.on()功能如下文档

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

工作小提琴

于 2015-01-05T07:43:48.070 回答