JQuery toggleClass not firing

Question

У меня есть простая страница с множеством элементов с тем же классом.

Когда кнопка нажата в одном из элементов, я хочу применить класс ко всем другим элементам, которые эффективно уменьшают их, используя непрозрачность.

Это то, что я пытаюсь, но это не добавляет классы:

CSS:

.act { width:100px; border:1px solid green; padding:20px; } 
.actDim { opacity:0.5; } 

HTML:

<div class="act actID1"> 
    <button class="btn btn-success enquireAct" id="1">Click</button> 
</div> 
<div class="act actID2"> 
    <button class="btn btn-success enquireAct" id="2">Click</button> 
</div> 
<div class="act actID3"> 
    <button class="btn btn-success enquireAct" id="3">Click</button> 
</div> 

JQuery:

$(document).on('click', '.enquireAct', function() { 
    var actID = $(this).attr('id'); 
    $('[class^="actID"]').removeClass('actDim'); // remove from all classes to start with 
    $('[class^="actID"]').not('.actID' + actID).addClass('actDim'); // add to everything but this 
}); 

Here's a fiddle

Есть ли лучший способ сделать это?

Answer 1

Вы используете attribute starts with селектор класса целевых элементов приписывать начать с act не actID поэтому запрос возвращает пустой коллекции, вы можете использовать селектор attribute contains вместо:

$('[class*="actID"]'); 

Но почему бы не используя .parent() метод?

$(this).parent('.act'); 

Тогда для выбора братьев родительского элемента вы можете использовать метод siblings.

Редактировать: Я забыл упомянуть, что вы не загрузили jQuery в свою скрипку.

http://jsfiddle.net/yJ7Jd/

Пожалуйста, обратите внимание, что attribute * селекторы очень дорогой, я хотел бы предложить, используя parent и siblings методы:

$(this).parent('.act') 
     .removeClass('actDim') 
     .siblings('.act') 
     .addClass('actDim');