你可以在getElementById中使用通配符吗？ [英] Can you use a wildcard in getElementById?

问题描述

我有以下代码行：

  document.getElementById（question _ *）。setAttribute（disabled ，假）; 
  

我想为元素ID使用通配符的形式。脚本运行并被很多不同的按钮使用，它们都有问题标识_ something - 是否有可能使这个 setAttribute


 < button id =question_1aonClick =nextQuestion（this .id）disabled>下一个问题< / button> 
  

编辑：

到建议的类名。按钮现在是：

 < button id =question_1aclass =nextButtondisabled>下一个问题< / button> 
  

我已添加以下行以使其不被禁用：

  var elems = document.getElementsByClassName（'nextButton'）。setAttribute（disabled，false）; 
  

但我得到：未捕获的TypeError：Object＃没有方法'setAttribute'

解决方案

您不能使用通配符与 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）; - 但是我得到：Uncaught TypeError：Object＃没有方法'setAttribute'

这是因为您无法一次性修改NodeList的属性，但是可以为（）{使用。 （）{...} 循环，或类似的操作：

code>：

  var elems = document.getElementsByClassName（'question'）; 
 for（var i = 0，len = elems.length; i< len; i ++）{
 elems [i] .disabled = false; //使其全部启用
} 
  

JS Fiddle演示。

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

  var elems = document.getElementsByClassName（'question'）; 
 [] .forEach.call（elems，function（a）{
 a.disabled = false; //将启用所有元素
}）; 
  

JS Fiddle演示。

参考文献：

• Array.prototype.forEach（） 。


• CSS属性选择器 。


• 文档。 getElementById（） 。


• document.getElementsByClassName（） 。


• document.querySelector（） ^兼容性 。


• document.querySelectorAll（） ^兼容性 。


• Function.prototype.call（） 。


• JavaScript for 循环。
>

I have the following line of code:

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

I want to use a form of wildcard for the element ID. The script is run and used by lots of different buttons, they all have ID's of question_something - is it possible to make this setAttribute to make the button enabled for various ID's?

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

EDIT:

I've switched to a classname as suggested. Buttons now are:

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

I've added the following line to make this not disabled:

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

But I get: Uncaught TypeError: Object # has no method 'setAttribute'

解决方案

You can't use wildcards with document.getElementById(), you can, however, with document.querySelectorAll():

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

This, of course, requires a relatively up to date browser; on the other hand using a class-name (for example question) to associate those elements would allow you to use:

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

Or:

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

I tried doing this: var elems = document.getElementsByClassName('nextButton').setAttribute("disabled", "false"); - but I get: Uncaught TypeError: Object # has no method 'setAttribute'

That's because you can't modify the properties of a NodeList all at once, you can, however, use a for (){...} loop, or similar to do so:

Using 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.

Or using forEach (up to date browsers):

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

JS Fiddle demo.

References:

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

这篇关于你可以在getElementById中使用通配符吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！