如何在Javascript中将ID更改为Class

Question

如何将 javascript 从 ID 更改为 Class？我试图自己做，但没有运气，这就是我最终的结果。原始代码是显示或隐藏元素并记住用户的选择。

HTML：

<div class="popup" style="display:none">
    <img src="image-url.jpg" alt="alt text" title="title text">
</div>

JAVASCRIPT：

function setCookie (name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}

function getCookie (name) {

    var cookie = " " + document.cookie;
    var search = " " + name + "=";
    var setStr = null;
    var offset = 0;
    var end = 0;

    if (cookie.length > 0) {
        offset = cookie.indexOf(search);

        if (offset != -1) {
            offset += search.length;
            end = cookie.indexOf(";", offset);

            if (end == -1) {
                end = cookie.length;
            }

            setStr = unescape(cookie.substring(offset, end));
        }
    }

    if (setStr == 'false') {
        setStr = false;
    } 

    if (setStr == 'true') {
        setStr = true;
    }

    if (setStr == 'null') {
        setStr = null;
    }

    return(setStr);
}

function hidePopup() {
    setCookie('popup_state', false); 
    document.getElementsByClassName('popup').style.display = 'none';
}

function showPopup() {
    setCookie('popup_state', null);
    document.getElementsByClassName('popup').style.display = 'block';
}

function checkPopup() {
    if (getCookie('popup_state') == null) { 
        // if popup was not closed
        document.getElementsByClassName('popup').style.display = 'block';
    }
}

Answer 1

document.getElementsByClassName 会返回一个 NodeList。并且 NodeList 没有有用的 style 属性......它只有 length，以及列表中每个节点的索引。

为了设置找到的每个popup 的样式，您应该遍历NodeList。例如：

function showPopups() {
    setCookie('popup_state', null);
    var popups = document.getElementsByClassName('popup');
    for (var i = popups.length - 1; i >= 0; --i) {
        popups[i].style.display = '';
    }
}

当然，要隐藏它们，您可以将 display 设置为 none。

如果您知道您只需要更改一个元素，(1) 为什么不使用 ID？ :) 但是 (2) 你可以说document.getElementsByClassName('popup')[0] 来访问一个元素。请注意，不过……如果您有多个，您只会以这种方式更改第一个。