Question

我的javascript似乎有问题。悬停/选中状态仅适用于第一个单击按钮。但是当您单击其他状态时，所选状态现在已经可用。

$('.option-btn').click(function(){
    if ($('.option').hasClass('selected')) {
        $(this).removeClass('selected');
    } else {
        $(this).addClass('selected');
    }
});

结果应该是用户可以尽可能多地点击。（使多个按钮处于活动/选中状态）

以下是样本小提琴：http://jsfiddle.net/fdLfthnv/

Answer 1

我更新了你的小提琴：http://jsfiddle.net/fdLfthnv/1/

$('.option')将返回HTMLCollection，而不是每个点击的项目。使用$(this)

这样做：

$('.option-btn').click(function(){
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    } else {
        $(this).addClass('selected');
    }
});

Answer 2

更改

if ($('.option').hasClass('selected'))

到

if ($(this).hasClass('selected'))

FIDDLE

更新以回答OP的其他问题：

将你的jquery改为：

$('.bet-offer div.option').click(function(){
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
            $(this).siblings().css('pointer-events', 'auto');
        } else {
            $(this).addClass('selected');
            $(this).siblings().css('pointer-events', 'none');
        }
    });

更新了FIDDLE

Answer 3

您需要在JavaScript的第二行将$（＆＃39; .option＆＃39;）更改为$（this）：

$('.option-btn').click(function(){
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        } else {
            $(this).addClass('selected');
        }
    });

https://jsfiddle.net/lemoncurry/qbchar6L/

其他div选项不起作用

3 个答案: