切换类不起作用

Posted

技术标签:

【中文标题】切换类不起作用【英文标题】:Toggle class is not working 【发布时间】:2017-09-03 09:09:51 【问题描述】:

我有三个播放按钮,用于一个简单的自定义播放器,以这种方式列出:

<div>
  <div class="gs-player">
    <div id="gs1" onclick="play(309689093)" class="fa fa-3x fa-play"></div>
  </div>
  <div class="gs-player">
    <div id="gs2" onclick="play(316017522)" class="fa fa-3x fa-play"></div>
  </div>
  <div class="gs-player">
    <div id="gs3" onclick="play(315363199)" class="fa fa-3x fa-play"></div>
  </div>
</div>

当我点击它们时,我想做的是:

    删除所有活动类(我用fa-pause) 在fa-pause 我点击的div 类中切换

我是这样做的:

$(document).ready(function() 
    $('.fa-play').click(function () 
      $('.fa-pause').removeClass('fa-pause'); 
      $(this).toggleClass('fa-pause');          
    );
);

除了切换功能之外,它基本上可以正常工作,它看起来更像是一个 addClass。如果我再次单击活动的div,它不会删除fa-pause

JSFiddle 中的行为更加清晰。

另外,有没有办法在不使用框架的情况下做到这一点?

【问题讨论】:

【参考方案1】:

不要自己做$('.fa-pause').removeClass('fa-pause');,为此提到了切换:

$(document).ready(function() 
    $('.fa-play').click(function () 
      $('.fa-pause').not(this).removeClass('fa-pause');
      $(this).toggleClass('fa-pause');          
    );
);

【讨论】:

【参考方案2】:

您正在删除该类,然后将其重新打开。添加.not(this),以避免这种情况。它将确保被修改的元素不会是当前被点击的元素。

$(document).ready(function() 
    $('.fa-play').click(function () 
      $('.fa-pause').not(this).removeClass('fa-pause'); 
      $(this).toggleClass('fa-pause');          
    );
);

function play () ; //remove this line, I used this just to avoid error (because we don't have your full code).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

<div>
  <div class="gs-player">
    <div id="gs1" onclick="play(309689093)" class="fa fa-3x fa-play"></div>
  </div>
  <div class="gs-player">
    <div id="gs2" onclick="play(316017522)" class="fa fa-3x fa-play"></div>
  </div>
  <div class="gs-player">
    <div id="gs3" onclick="play(315363199)" class="fa fa-3x fa-play"></div>
  </div>
</div>

【讨论】:

以上是关于切换类不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Router and canActivate类不起作用。未找到指令

Django模板视图类不起作用

Laravel - 自定义类不起作用

WP HTML缩小类不起作用

如何将 getContext 传递给 Java 类不起作用? [复制]

C ++扩展Windows WRL组件类不起作用