jquery - 单击时无法更改元素类

Question

请告诉我为什么AudioVol+..(ex.1,2,3 and other) 在单击具有类名的元素时，带有 id 的 div 不会更改类名option_audio_player_mute？

还告诉我，我可以减少/重构我的代码吗？

$('.option_audio_player_mute').live('click', function () {
    var idn = this.id.split('+')[1];
    var vol1 = $('#AudioVol1+' + idn);
    if ($(this).hasClass('audio_mute')) {
        vol1.removeClass('audio_vol_not_active').addClass('audio_vol_active');
    } else if ($(this).hasClass('audio_not_mute')) {
        vol1.removeClass('audio_vol_active').addClass('audio_vol_not_active');
    }
});

为什么这不起作用？

Answer 1

该+符号在 CSS（和 jQuery）选择器中具有特殊含义：它用于指定相邻的兄弟选择器。

尝试+使用两个反斜杠转义 id 选择器中的符号：

var vol1 = $("#AudioVol1\\+" + idn);

Answer 2

您可以使用.toggleClass，并使用.on而不是.live.

$(document).on('click', '.option_audio_player_mute', function() {
    var vol1 = $("#AudioVol1\\+" + this.id.split('+')[1]), 
        $this = $(this);
    vol1.toggleClass('audio_vol_active', $this.hasClass('audio_mute'))
        .toggleClass('audio_vol_not_active', $this.hasClass('audio_not_mute'));
});