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);
}());

的更新 的

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

1 个答案: