Question

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

<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中的行为更加明确。

另外，有没有办法在不使用框架的情况下执行此操作？

Answer 1

您正在删除该类，然后将其切换回来。添加.not(this)，以避免这种情况。它将确保修改的元素不会被当前点击。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

不要自己做$('.fa-pause').removeClass('fa-pause');，为此提及切换：

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

切换类不起作用

2 个答案: