javascript - 使用 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 我想在点击带有 optionButton 类的 a 标签时触发一个事件，但我不知道如何将事件限制为 div a 标签位于。

例如现在我有这样的东西:

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

当我点击 pack1 div 中的 First option 时，它对于第一个选择工作正常，但是如果我进行另一个选择，让我们说 pack3 div 中的第三个选项，第一个选项将消失。

另外，每个 pach 必须只有一个选择的选项。

Answer 1

您需要缩小 removeClass 的选择范围，因为现在它正在选择 every 出现的 optionButton。

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

这将通过选择具有 optionButton 类的被单击元素的兄弟元素来缩小范围。

JSFiddle

编辑:糟糕，放错了类。现在应该打补丁了。