社区首页 >问答首页 >JavaScript是否仅用一个类检索div元素的唯一“id”？

问JavaScript是否仅用一个类检索div元素的唯一“id”？
EN

Stack Overflow用户

提问于 2014-03-27 09:01:22

回答 1查看 144关注 0票数 0

当编写一个JavaScript脚本来迭代一组具有相同类名的元素时，您可以分别修改它们的每个属性。

如果没有唯一的ID，脚本如何知道要编辑哪些元素？如果它们确实有唯一的ID，如何检索它们呢？使用alert();从一个简单的document.getElementsByClassName('');中显示节点数组中包含的内容似乎也显示了元素的类型。

我真的可以将这些结果存储在一个数组中以供以后使用吗？

如果在加载文档时，我获取了一个具有特定类名的元素数组：

<script>

var buttonArray = document.getElementsByClassName('button');

</script>

然后迭代这段代码，并将'r‘位置的结果添加到一个对象中：

<script>

var buttonArray = document.getElementsByClassName('button');
var buttonObject = {};

for(r=0;r<buttonArray.length;r+=1)
{
     buttonObject[buttonArray[r]] = [r*5,r*5,r*5];
}

</script>

我是否可以像这样找到每个带有classname 'button‘的元素的数组：

<script>

var buttonArray = document.getElementsByClassName('button');
var buttonObject = {};

function changeCol(buttonID)
{
     var red = buttonObject[buttonID][0];
     var green = buttonObject[buttonID][1];
     var green = buttonObject[buttonID][2];
     buttonID.style.backgroundColor = "rgb("+red+","+green+","+blue+")";
}

for(r=0;r<buttonArray.length;r+=1)
{
     buttonObject[buttonArray[r]] = [r*5,r*5,r*5];
     buttonArray[r].onclick = function(){ changeCol(this); };
}

</script>

我认为onclick = function(){ changeCol(this); };的this部分应该与我存储在buttonObject对象中的唯一ID相同，也就是保存数组的变量名。

这应该起作用吗？我似乎不能在我的网页上获得它，所以我使用buttonObject中的按钮innerHTML作为保存该对象的数组的变量名。这样做的问题是，我可能需要两个或更多的按钮才能拥有相同的innerHTML。

下面是当前的网页：http://www.shadespeed.com

我需要重新制作脚本，以允许按钮具有相同的名称。

任何提示/建议都将不胜感激。

非常感谢！

Dan.:)

javascript

html

腾讯云BI 特惠专场

基础版首月仅99元，功能升级，仪表盘个数不限，支持自由画布、邮件推送功能！

回答 1

Stack Overflow用户

发布于 2014-03-27 09:09:06

假设我桌上有一副纸牌，面朝上。我想把所有红色的都翻过来。我可能会这样做：

desk.getCardsByColour("red").forEach(flipit);
// note, obviously not real JavaScript for a not real situation :p

所以我浏览了我的卡片，找到了所有的红色卡片。然后我把它们翻过来。您所问的基本上是“如果没有唯一的if，我怎么知道应该翻哪些牌呢？”那么，我是否需要一个ID来迭代一个对象集合，在本例中是一组卡片？当然不是。

(请注意，尽管扑克牌中的卡片在其内容中确实有一个独特的属性，但让我们假设这是元素的内容，而不是id属性，好吗？)

现在，下面是我如何做你正在做的事情：

for( r=0; r<buttonArray.length; r++) {
  buttonArray[r].buttonObject = [r*5,r*5,r*5];
  buttonArray[r].onclick = changeCol;
}
function changeCol(button) {
  var red   = button.buttonObject[0];
  var green = button.buttonObject[1];
  var blue  = button.buttonObject[2];
  button.style.backgroundColor = "rgb("+red+","+green+","+blue+")";
}