如何缩短这个jQuery代码？

Question

很抱歉这个不说标题,但我有一个关于如何缩短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不会这样做,因为我可以连续两次按下该对象,因此可以同时聚焦多个对象,而我正在寻找某种切换,其中一次只能有一个对象聚焦(即让"聚焦"类).

这是我的初学者,但我猜我应该在某处涉及'这个',但我无法弄清楚如何.

提前致谢!你们好棒!

Answer 1

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

$(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来选择元素.