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代替ids来选择元素。

如何缩短这个jQuery代码？

1 个答案: