Question

我们有一个音频font-awesome icon，它在while循环中生成如下：

while(condition true) {
    <div class="ringtone-details-play-control">
        <a href="javascript:void(0)">
            <i id="player_button" class="simple-player-play-control"></i>
        </a>
    </div>
}

让我们想象while条件为真5次，然后音频控制按钮将显示5次。

实际上，我们希望在单击音频按钮时在onclick上添加样式simple-player-stop-control。

所以，我正在使用类似这样的jquery：

$('#player_button').click(function()) {
    $(this).toggleClass('simple-player-stop-control');
    $(this).toggleClass('simple-player-play-control');
}

但问题是当我点击第一个按钮然后它可以工作，但是在第2，第3，第4和第5个按钮不起作用。

那么请帮助我们如何做到这一点？

Answer 1

问题是重复的ID。 ID选择器$('#player_button')仅定位第一个元素。

ID应始终是唯一的。你应该使用同一个班级player_button

 <a href="javascript:void(0)">
        <i class="player_button simple-player-play-control"></i>
 </a>

然后使用类选择器来定位它们。您也可以使用单.toggleClass切换2个类：

$('.player_button').click(function()) {
   $('.player_button').not(this).removeClass('simple-player-stop-control').addClass('simple-player-play-control');
   $(this).toggleClass('simple-player-play-control simple-player-stop-control');
}

<强>更新

$('button').click(function() {
  $('button').not(this).removeClass('play-button').addClass(' stop-button');
  $(this).toggleClass('stop-button play-button');
});

<强> Working Demo

onclick使用javascript或jquery更改类

1 个答案: