Использование JQuery для целевого класса в DIV и выполнить дополнительные изменения в пределах того же DIV

Question

У меня есть следующий HTML-код:

<div class="pack1"> 
    <a class="optionButton">First option</a> 
    <a class="optionButton">Second option</a> 
    <a class="optionButton">Third option</a> 
</div> 

<div class="pack2"> 
    <a class="optionButton">First option</a> 
    <a class="optionButton">Second option</a> 
    <a class="optionButton">Third option</a> 
</div> 

<div class="pack3"> 
    <a class="optionButton">First option</a> 
    <a class="optionButton">Second option</a> 
    <a class="optionButton">Third option</a> 
</div> 

[...] 

<div class="pack10"> 
    <a class="optionButton">First option</a> 
    <a class="optionButton">Second option</a> 
    <a class="optionButton">Third option</a> 
</div> 

Использование JQuery Я хотел бы, чтобы вызвать событие по нажатию на a тег с optionButton класс, но я не знаю, как ограничить событие в DIV, что a тег проживает в

Например прямо сейчас у меня есть что-то вроде:.

$(document).ready(function(){ 
    $('.optionButton').click(function() { 
     $(".optionButton").removeClass('checked'); 
     $(this).addClass('checked'); 
    }); 
}); 

Он отлично работает для первого выбора, скажем, когда я нажимаю First option в div pack1, но если я сделаю еще один выбор, скажем Third option в div pack3, первый из них исчезнет.

Кроме того, для каждой пачки должен быть только один выбранный параметр.

Answer 1

Поскольку точная структура DOM сильно меняться, лучше всего это почти всегда идти к родителю и искать свой путь вниз, как так:

1) $(this).parent().find(".optionButton").removeClass("checked");

или вы можете упростить селектор набор результатов (и сделать код немного более эффективным), сказав:

2) $(this).parent().find(".checked").removeClass("checked");

Вы также можете использовать параметр контекста выбора, как так:

3) $(".checked", $(this).parent()).removeClass("checked");

Разница между 2 и 3 является чисто синтаксической. JQuery преобразует 3 в 2 за кулисами

Answer 2

Вы должны сузить выбор вашего removeClass, так как сейчас это выбор каждый возникновения optionButton.

$(document).ready(function(){ 
    $('.optionButton').click(function() { 
     $(this).siblings('.optionButton').removeClass('checked'); 
     $(this).addClass('checked'); 
    }); 
}); 

Это сузить, выбрав братьев и сестер нажатого элемента, которые имеют класс optionButton.

JSFiddle

EDIT: Woops, поставили неправильный класс там. Должен быть исправлен сейчас.

Answer 3

Я думаю, что это может работать

$(document).ready(function(){ 
    $('.optionButton').click(function() { 
     var parent = $(this).closest("div");//getting the parent content 
     parent.find(".optionButton").removeClass('checked');//remove the checked 
     $(this).addClass('checked'); 
    }); 
});