Question

我有以下代码行：

document.getElementById("question_*").setAttribute("disabled", "false");

我想使用一种通配符形式的元素ID。该脚本由许多不同的按钮运行和使用，它们都有问题_ something的ID - 是否可以使setAttribute为各种ID启用按钮＆＃39; S'

<button id="question_1a" onClick="nextQuestion(this.id)" disabled>Next question</button>

编辑：

我已根据建议切换到了类名。按钮现在是：

<button id="question_1a" class="nextButton" disabled>Next question</button>

我已添加以下行以禁用此功能：

var elems = document.getElementsByClassName('nextButton').setAttribute("disabled", "false");

但是我明白了：未捕获TypeError：对象＃没有方法＆＃39; setAttribute＆＃39;

Answer 1

您不能在document.getElementById()上使用通配符，而可以，document.querySelectorAll()：

var elems = document.querySelectorAll('button[id^="question_"]');

当然，这需要一个相对最新的浏览器;另一方面，使用类名（例如question）来关联这些元素将允许您使用：

var elems = document.getElementsByClassName('question');

或者：

var elems = document.querySelectorAll('button.question');

我试过这样做：var elems = document.getElementsByClassName('nextButton').setAttribute("disabled", "false"); - 但我明白了：未捕获TypeError：对象＃没有方法'setAttribute'

那是因为您不能同时修改NodeList的属性，但是，您可以使用for (){...}循环或类似的方法来执行此操作：

使用for(){...}：

var elems = document.getElementsByClassName('question');
for (var i = 0, len = elems.length; i < len; i++){
    elems[i].disabled = false; // to make them all enabled
}

JS Fiddle demo

或使用forEach（最新浏览器）：

var elems = document.getElementsByClassName('question');
[].forEach.call(elems, function(a){
    a.disabled = false; // will make all elements enabled
});

JS Fiddle demo

参考文献：

Array.prototype.forEach()。
CSS attribute-selectors。
document.getElementById()。
document.getElementsByClassName()。
document.querySelector() ^{compatibility}。
document.querySelectorAll() ^{compatibility}。
Function.prototype.call()。
JavaScript for loop。

Answer 2

这正是班级的用途：

<button class="question" id="question_1a" onClick="nextQuestion(this.id)" disabled>Next question</button>

和

var elems = document.getElementsByClassName("question");
for(var z=0;z<elems.length; z++){
   elems[z].setAttribute("disabled", "false")
}

Answer 3

另一种可能性，如果querySelectorAll或getElementsByClassName（可能以类似方式填充），则无法使用，并且您希望匹配多个ID。

HTML

<button>Question</button>
<button id="question_1a">Question</button>
<button id="question_1b">Question</button>
<button id="question_1c">Question</button>
<button id="question_1d">Question</button>
<button id="question_2a">Question</button>

的Javascript

function getElementsById(regex) {
    var tags = document.getElementsByTagName('*'),
        tagsLength = tags.length,
        matches = [],
        index,
        tag;

    for (index = 0; index < tagsLength; index += 1) {
        tag = tags[index];
        if (regex.test(tag.id)) {
            matches.push(tag);
        }
    }

    return matches;
}

console.log(getElementsById(/^question_1[a-z]?$/));

输出

[button#question_1a, button#question_1b, button#question_1c, button#question_1d]

在jsFiddle

上

然后你可以迭代这个数组并设置属性

getElementsByclassName垫片

function getElementsByClassName(node, className) {
    var array = [],
        regex = new RegExp("(^| )" + className + "( |$)"),
        elements = node.getElementsByTagName("*"),
        length = elements.length,
        i = 0,
        element;

    while (i < length) {
        element = elements[i];
        if (regex.test(element.className)) {
            array.push(element);
        }

        i += 1;
    }

    return array;
}

Answer 4

不支持通配符。但要解决这个问题，你可以使用jQuery来做同样的事情。

P上。 S.一旦我回到办公桌，我会尝试发布代码

<强>更新同意David Thomas＆amp; Beemo的代码暗示应解决您的问题

Answer 5

您可以使用JQuery $("[id^='question_']")选择器来获取具有以问题_

开头的id的所有元素

你能在getElementById中使用通配符吗？

5 个答案: