使用 getElementById 更改多个 DIV id 的背景

Question

在这个问题上花了几个小时后，我需要把它扔给大众。我在 http://sketch360test.co.uk/test.php 上有一个测试页面我正在尝试使用 onclick 事件同时满足两个目的... 1）显示/隐藏各种结果 div（这是有效的），2）更改“问题”div 的背景图像。默认情况下，所有“问题”div 都有一个绿色背景图像（由 CSS 控制），翻转时有一个黑色图像......我试图让它们每个都有一个黑色图像 onclick，以及重置 bg单击其中一个后，所有其他问题 div 的图像都会变为绿色。希望这是有道理的...如果您查看该页面，应该会更明显！

我已经成功地在单个实例中实现了此功能，即...单击问题 1、问题 2 或问题 3 会将它们变成黑色背景。这是使用内联 onclick 函数调用 css 类来完成的，例如：

<div id="section-menu-1" onclick="this.className='className2';">Question 1</div>

然后我向该元素的容器添加了更多 javascript（问题 1），它设法“重置”或“恢复”黑色背景第3题为绿色。这是使用以下脚本完成的：

<script type="text/javascript">

function changeClass()
{
 var e = document.getElementById("section-menu-3");
 e.setAttribute('class', 'className1');
 e.setAttribute('className', 'className1'); // for IE which does not recognize "class"
 return;
}
</script>

请注意，我已经尝试了许多脚本来更改我的 DIV 的类，这是唯一一个一致工作的脚本。但这就是问题所在 - 我想修改上面的脚本以影响所有问题 ID，而不仅仅是“section-menu-3”。顺便说一句，这个演示中只有 3 个问题，但我在最后一页上将有多达 7 或 8 个问题，因此需要修改上面的脚本以便能够获取多个 ID。我已经尝试过像 getElementsByTag 这样的方法，但无法让它们工作（也许是因为我试图将一个类添加到我已经在该过程中应用了一个类的元素）。

我尝试过的任何其他方法最终都会破坏上述迷你脚本的功能。

基本上，帮助！ [ 请 ：）） ]

Answer 1

将所有 div 包裹在一个带有 id 的外部 div 中，如下所示：

<div id="section-menu-container">
    <div id="section-menu-1" onclick="this.className='className2';">Question 1</div>
    <div id="section-menu-2" onclick="this.className='className2';">Question 2</div>
    <div id="section-menu-3" onclick="this.className='className2';">Question 3</div>
</div>

然后使用您的 javascript 函数：

function changeClass()
{
 var elems = document.getElementById("section-menu-container").getElementByTagName('div');
 elems.setAttribute('class', 'className1');
 elems.setAttribute('className', 'className1'); // for IE which does not recognize "class"
 return;
}

Answer 2

看看这个演示： fiddle

这应该会让您朝着正确的方向前进。

Answer 3

基本上，您需要某种通用选择器，正如上面 Paul 所建议的，jquery 是一个很棒的工具。然后您可以为您的问题添加一个班级，例如“myclass”。然后，使用 jquery 执行：

$('.myclass').attr("class", "className1");

或者，您可以直接使用 javascript 来完成： document.getElementsByClassName('myclass')
将返回 DOM 对象数组，您需要迭代每个元素。但是，IE6 SP1 之前的 IE 版本可能不支持 getElementsByClassName。

Answer 4

如何实现一个简单的跨浏览器 getElementsByClassName 函数

function initializeGetElementsByClassName ()
{
  if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
      var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
      var allElements = document.getElementsByTagName("*");
      var results = [];
      var element;
      for (var i = 0; (element = allElements[i]) != null; i++) {
        var elementClass = element.className;
        if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
          results.push(element);
        }
        return results;
      }
    }
};

var currentWindowOnLoad = window.onload;

window.onload = function () {
    if (currentWindowOnLoad) {
        currentWindowOnLoad();
    }
    initializeGetElementsByClassName();
};

现在使用它您可以简单地执行以下操作：

HTML

<div class="sectionMenu" id="id="section-menu-1" ></div>
<div class="sectionMenu" id="id="section-menu-2" ></div>
<div class="sectionMenu" id="id="section-menu-3" ></div>

脚本

var sectionMenus = document.getElementsByClassName("sectionMenu");
for (var i = 0; i < sectionMenus.length; i++) {
  var currentClass = !sectionMenu[i].getAttribute("class") ? sectionMenu[i].getAttribute("classname") : sectionMenu[i].getAttribute("class");
  sectionMenu[i].setAttribute("class", currentclass + " classname1");
  sectionMenu[i].setAttribute("classname", currentclass + " classname1");
}