1

很抱歉没有说标题，但我有一个关于如何缩短一段 jQuery 代码的问题：

$(function() {
    $("#profile1").click(function() {
        $("#profile1").addClass("focused");
        $("#profile2").removeClass("focused");
        $("#profile3").removeClass("focused");
    });
    $("#profile2").click(function() {
        $("#profile1").removeClass("focused");
        $("#profile2").addClass("focused");
        $("#profile3").removeClass("focused");
    });
    $("#profile3").click(function() {
        $("#profile1").removeClass("focused");
        $("#profile2").removeClass("focused");
        $("#profile3").addClass("focused");
    });
});

就我所见，toggleClass 不会这样做，因为我可以连续按下该对象两次，因此可以同时聚焦多个对象，而我正在寻找某种开关，其中一次只能聚焦一个对象（即让类“聚焦”）。

这是我是一个初学者，但我猜我应该在某个地方涉及“这个”，但我不知道如何。

提前致谢！你们真棒！

4

1 回答 1

7

从所有这些类中删除该类，然后仅将其添加到目标类中。此外，仅使用单个事件处理程序并动态引用事件目标。

$(function() {
    var $profiles = $("#profile1, #profile2, #profile3");
    $profiles.click(function(e) {
        $profiles.removeClass("focused");
        $(this).addClass("focused"); // or use `e.target` instead of `this`
    });
});

您现在也可以使用类.profile而不是 id 来选择元素。

于 2013-10-30T01:03:30.467 回答