Question

花了好几个小时来解决这个问题我需要把它扔给群众。我在http://sketch360test.co.uk/test.php上有一个测试页面，我试图使用onclick事件同时用于两个目的... 1）显示/隐藏各种结果div（这是工作），2）更改'问题'div的背景图片。默认情况下，所有'问题'div都有一个绿色背景图像（由CSS控制），翻转时出现黑色图像......我试图让每个人都有一个黑色图像点击，以及重置bg当点击一个时，所有其他问题div的图像变为绿色。希望有意义......如果你查看页面，它应该更加明显！

我已经设法让这个工作单个实例，即...点击问题1，问题2或问题3将它们变为黑色bg。这是使用内联onclick函数来调用css类完成的，例如：

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

然后我为这个元素添加了一些更多的javascript（问题1），它设法将问题3的黑色bg“重置”或“恢复”为绿色。这是使用以下脚本完成的：

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

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

我尝试过的任何其他内容最终都破坏了上述迷你剧本的功能。

基本上，帮助！ [请:)）]

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 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是一个很好的工具。然后你可以在你的问题中添加一个类，比如说“myclass”。然后，使用jquery：

$（'。myclass'）。attr（“class”，“className1”）;

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

Answer 3

如何实现简单的跨浏览器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");
}

Answer 4

看一下这个演示：fiddle

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

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

4 个答案: