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

Question

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

我已经设法让这适用于单个实例，即...单击问题 1、问题 2 或问题 3 会将它们变成黑色背景。 这已经使用内联 onclick function 来调用 css ZA2F2ED4F8EBC0461C21A2DDC 来完成

<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 的 class，这是唯一一个始终如一的脚本。 不过，问题就在这里——我想修改上面的脚本以影响所有的问题 ID，而不仅仅是“section-menu-3”。 顺便说一句，这个演示中只有 3 个问题，但我在最后一页最多会有 7 或 8 个问题，因此需要修改上述脚本以获取大量 ID。 我已经尝试过 getElementsByTag 之类的方法，但无法让它们工作（可能是因为我正在尝试将 class 添加到我已经为该过程应用的元素中）。

我尝试过的其他任何事情都最终破坏了上述迷你脚本的功能。

基本上，帮助：[请:))]

Answer 1

将所有 div 包装在一个外部 div 中，其 id 如下所示：

<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：

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

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

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

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

Answer 3

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

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");
}

Answer 4

看看这个演示：小提琴

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