Question

我有以下列表结构：

<ul>
    <a class="target">one</a>
    <a class="target">two</a>
    <a class="target">three</a>
</ul>

当我点击<a>元素时，我为点击的元素添加了一个“选定的”类，为其他元素添加了一个“未选择的”类，如下所示：

$(".target").click(){
    $(this).siblings().removeClass("selectedClass"); //remove "selected" class from siblings
    $(this).addClass("selectedClass"); //add selected class to clicked element
}

现在出现了我的问题。如果我更改列表结构如下（将<a>包装成div）：

    <ul>
    <div><a class="target">one</a></div
    <div><a class="target">two</a></div
    <div><a class="target">three</a></div
    </ul>

我不知道如何找到我点击的兄弟姐妹（其他<a>元素）。

    $(".target").click(){
        // how to target the others two <a> elements to call removeClass on them?    
        $(this).addClass("selectedClass"); //add selected class to clicked element - still works
    }

Answer 1

您只是对绑定点击事件的语法感到困惑，

$(".target").click(function(){
    $(this).siblings().removeClass("selectedClass"); //remove "selected" class from siblings
    $(this).addClass("selectedClass"); //add selected class to clicked element
});

您应该在匿名函数中编写click事件的代码。或者只是将代码写在一个单独的函数中，然后将引用传递给它。

我刚看到你的html结构，无效。锚标记不应该是无序列表的直接子标记。

DEMO

修改HTML：

<ul>
    <li><a class="target">one</a></li>
    <li><a class="target">two</a></li>
    <li><a class="target">three</a></li>
</ul>

修改JS：

$(".target").click(function () {
    var parent = $(this).parent()
    parent.siblings().removeClass("selectedClass"); //remove "selected" class from siblings
    parent.addClass("selectedClass"); //add selected class to clicked element
});

Answer 2

实际上，您可以通过这种方式进行设计，从而无需确切知道其他项目的位置;例如，通过保留最后选择的元素并仅更改该元素和当前单击的元素：

jQuery(function($) {
    var $current = $();

    $(".target").click(function() {
        $current.removeClass('selectedClass');
        $current = $(this).addClass('selectedClass');
    });
});

或者，只需一次缓存所有目标元素：

jQuery(function($) {
    var $targets = $('.target');

    $targets.on('click', function() {
        $targets.removeClass('selectedClass');
        $(this).addClass('selectedClass');
    });
});

找到被点击元素的兄弟姐妹

2 个答案:

DEMO