javascript - 使用点击事件更改 "focus"中的 div？

Question

我正在尝试使用 jQuery 来突出显示被单击的 div，并保持这种状态，直到单击其他几个 div 之一。 JSfiddle

所有的 CSS 和 HTML 都很好；如果我手动更改包装 div 的 ID 和类，它们将按预期工作。但是，jQuery 代码似乎不起作用:

var $allWraps = $("#mainBody .wrap");

$allWraps.each(function () {
    $(this).on("click", ".kid ", function () {
        setFocus($(this));
    });
});

function setFocus(f) {
    $allWraps.each(function () {
        $(this).each(function () {
            $(this).removeAttr(" id ");
            $(this).addClass(" unfocused ");
        });

        f.attr(" id ", " focused ");
        f.removeClass(" unfocused ");
    });
}

我不能 100% 确定我是否正确使用了 .each() 函数，或者我是否具有在函数中使用 DOM 对象参数的正确语法。

Answer 1

参见 http://jsfiddle.net/9n93wyrq/6/

使用类名作为焦点和非焦点，而不是 ID。 f 也是您的 kid，因此您需要将“focused”添加到其父级。

function setFocus(f) {
    $allWraps.each(function () {
        $(this).each(function () {
            $(this).removeClass("focused").addClass("unfocused");
        });
    });

    $(f).parent().removeClass("unfocused").addClass("focused");
}