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标签时触发一个事件，但我不知道如何将事件限制为{{1标签位于。

例如，现在我有类似的东西：

它适用于第一个选择，让我说当我点击$(document).ready(function(){ $('.optionButton').click(function() { $(".optionButton").removeClass('checked'); $(this).addClass('checked'); }); }); div中的First option，但如果我再做一个选择，请在{{1}中说pack1 div，第一个将消失。

此外，每个pach必须只有一个选定的选项。

Answer 1

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

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

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

JSFiddle

编辑： Woops，把错误的课程放在那里。现在应该修补。

Answer 2

因为确切的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 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');
    });
});

使用jQuery来定位div中的类并在同一个div中执行其他更改

3 个答案: