javascript - 需要一种更好的方法来批量修改 css 类

Question

我有大量的列表元素。这个概念是用户只能从该集合中选择两个项目。我将选中/取消选中显示为列表项前面的图像，只是出于视觉目的，该列表是否被选中。图像是在一个类中定义的，所以我必须切换类以显示选中或未选中。

这就是我目前修改类的方式，但我认为它可能太重了。

function showAsSelected(selectedArr, selectedCat) {
    var allLinks = document.getElementsByClassName("linkRef");
    var len = allLinks.length;
    for (var i = 0; i < len; i++) {
        allLinks[i].setAttribute('class', 'linkRef subCategLink');
    }
    for (var i = 0; i < selectedArr.length; i++) {
        selectedArr[i].setAttribute('class', 'linkRef subCategLinkChkd');
    }
}

'allLinks' 获取所有具有类“linkRef”的元素。有时数到100以上。第一个循环将类修改为“linkRef subCategLink”。这意味着它将从两个元素中删除“subCategLinkChkd”(运行数百个循环只修改两个)。

第二个循环仅在“selectedArr”数组中引用的两个元素上设置类。

Answer 1

我假设您有类似的 HTML 结构(如果是)您可以尝试这样的事情。

jsFiddle

(function () {
    "use strict";
    var list = document.getElementById("list"),
        selectedInputs = [],
        shifted = null;

    list.addEventListener("change", function (e) {
        var target = e.target,
            index = selectedInputs.indexOf(target);
        if (target.nodeName.toLowerCase() === "input" &&
            target.type.toLowerCase() === "checkbox" &&
            target.classList.contains("linkRef")) {
            if (target.checked && index === -1) {
                target.setAttribute('class', 'linkRef subCategLinkChkd');
                selectedInputs.push(target);
            } else if (target.checked === false && index !== -1) {
                selectedInputs.splice(index, 1);
                target.setAttribute('class', 'linkRef subCategLink');
            }
            if (selectedInputs.length > 2) {
                shifted = selectedInputs.shift();
                shifted.setAttribute('class', 'linkRef subCategLink');
                shifted.checked = false;
            }
        }
    }, false);
}());

已更新