Javascript 使用getElementById更改多个DIV id的背景'；s

在这个问题上花了好几个小时，我需要把它公诸于众。我有一个测试页面，在这个页面上我试图使用onclick事件同时达到两个目的。。。1） 显示/隐藏各种结果div（这正在工作），以及2）更改“问题”div的背景图像。默认情况下，所有“问题”div都有一个绿色背景图像（由CSS控制），滚动时有一个黑色图像。。。我试着让他们每个人在点击时都有一个黑色的图像，并且当点击一个时，将所有其他问题div的bg图像重置为绿色。希望这有意义。。。如果您查看页面，它应该更明显

我已经设法使它在一个实例中工作，即。。。单击问题1、问题2或问题3将使其变成黑色背景。这是使用内联onclick函数调用css类完成的，例如：

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

问题1

然后，我为这个元素（问题1）的容器添加了更多的javascript，它成功地将问题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>

函数changeClass（）
{
var e=document.getElementById（“section-menu-3”）；
e、 setAttribute（'class'，'className1'）；
e、 setAttribute（'className'，'className1'）；//用于不识别“class”的IE
返回；
}

请注意，我已经尝试了许多脚本来更改我的div的类，这是唯一一个始终有效的脚本。但问题就在这里——我想修改上面的脚本以影响所有问题ID，而不仅仅是“section-menu-3”。顺便说一句，在这个演示中只有3个问题，但我在最后一页上最多有7或8个问题，因此需要修改上面的脚本，以便能够获取大量ID。我尝试过像getElementsByTag这样的方法，但没有成功（可能是因为我正在尝试将一个类添加到一个元素中，我已经为该过程应用了一个类）

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

---

基本上，救命！[请：）]

基本上，您需要某种通用选择器，正如Paul所建议的，这是一个很好的工具。然后你可以在你的问题中添加一个类，比如说“myclass”。然后，使用jquery可以执行以下操作：

$（'.myclass'）.attr（“class”，“className1”）

或者，您也可以直接使用javascript:document.getElementsByCassName（'myclass'）来实现

---

将返回一个DOM对象数组，您需要迭代每个元素。但是，IE6 SP1之前的IE版本可能不支持getElementsByClassName。

将所有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>

---

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

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

请看这个演示：

这应该会让您找到正确的方向。
是否尝试过jQuery？这样可以方便地按类进行选择（也适用于IE）。（这里的演示既快又脏）document.getElementsByTagName（“*”）；速度相当慢。我认为他没有必要在这里设置一个类选择器。@PaulPRO。。。您认为jQuery是如何处理这些东西的。例如，下面的选择器$（“.classname”）。jQuery将首先使用getElementsByTagName（*）来限制结果并在所有DOM元素中搜索特定类。不，显然，放置$（“div.classname”）并指定标记会更有效，但是可以修改上面的函数来处理这些效率。是的。。。我知道。你的意思是什么？他在这里也不需要jQuery。@PaulPro我的观点是，我只是得到了一个对他的问题的健壮且可重用的答案。这个函数可以被重用，也可以用于其他目的。好的，我告诉你t可以被重用。我已经为同样的东西制作了自己的版本，只是在我需要的时候没有正则表达式，但是我认为类名称选择器不是他想要的，特别是当他覆盖函数中的class属性时，这意味着如果他为它们设置了某个类，那么函数只会工作一次，而不会进行额外的修改。嗨，Paul，非常感谢这一点；有没有可能对小提琴稍加修改，以产生以下内容？我已经试过了，但无法让它移动：（1）让Div#1显示在页面加载上，2）当你引入内部链接（即Div#3中的一个链接，链接到Div#2）时，该内部链接也会影响背景图像上的更改。我可以获得更改div的内部链接，但这对bg映像没有帮助：（@Paul..我在这里复制了小提琴：并在Div#3到Div#2中添加了链接，但仍然无法同时影响背景图像的更改。我已经成功地通过向该Div添加一个额外的显示：block style来在页面加载中显示Div#1，呜呜呜呜：）但是这种由内部链接业务触发的图像交换超出了我的范围：（试试这个：（注意：有很多方法可以处理这个问题，我只是很快地写了出来——它可能不是最有效的，但它可以与您所拥有的一起工作）我发现脚本[link]（jsfiddle.net/aSPZd/6）有一个奇怪的问题；当我尝试用外部链接替换内部链接时，例如，当一个内容div有一个指向外部站点的链接时，即使我从链接中删除.question类，它也不会运行-有什么想法吗？
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();
};

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