Другие опции div не работают

Question

У моего javascript есть проблема. Наведение/выбранное состояние работает только при нажатии первой кнопки. Но когда вы нажимаете остальные, выбранное состояние уже работает.

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

В результате пользователь должен щелкнуть столько, сколько сможет. (Создание нескольких кнопок, чтобы быть активным/выбрано)

Вот образец скрипка: http://jsfiddle.net/fdLfthnv/

Answer 1

Изменить

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

в

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

FIDDLE

UPDATE ответить 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 2

Я обновил свою скрипку: http://jsfiddle.net/fdLfthnv/1/

$('.option') вернется HTMLCollection, не каждый щелкнул элемент. Используйте $(this)

Делай так:

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

Answer 3

Вы должны изменить $ ('Опция') до $ (это) на второй линии вашего JavaScript:

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

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