IE9 不接受此代码

Question

我找到了这段代码，它是我问题的完美解决方案，但我发现它在 ie9 中不起作用。有谁知道如何重新编写此代码以在 IE9 中工作？这是它的javascript代码。

function showonlyonev2(thechosenone) {
    var newboxes = document.getElementsByTagName("div");
    for (var x = 0; x < newboxes.length; x++) {
        name = newboxes[x].getAttribute("class");
        if (name == 'newboxes-2') {
            if (newboxes[x].id == thechosenone) {
                if (newboxes[x].style.display == 'block') {
                    newboxes[x].style.display = 'none';
                }
                else {
                    newboxes[x].style.display = 'block';
                }
            } else {
                newboxes[x].style.display = 'none';
            }
        }
    }
}

我在 jsFiddle 中运行它并得到这个错误： 第 4 行字符 9 的问题：只读。

name = newboxes[x].getAttribute("class");

这里还有 HTML 部分（短版去掉了 head 和 body 标签）：

<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
         </div>
         <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
         </div>
         <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
         </div>
         <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
      </td>
   </tr>
</table>

这是我的 jsFiddle 视图 http://jsfiddle.net/Nuker_Viper/JvLDx/13/

Answer 1

您的编辑使问题更清晰：

我在 jsFiddle 中运行它并收到此错误：第 4 行字符 9 处的问题：只读。

name = newboxes[x].getAttribute("class");

您尚未在任何地方声明 name，因此您在某些包含范围（可能是全局范围，例如 window.name）中使用了 name。显然 IE9 认为这是一个只读属性，尽管我找不到任何支持它的文档。

在任何情况下，您都不想与别人的变量混在一起。将var name; 放在函数的顶部，以便您使用自己的 变量。 :-)

---

当我们不得不猜测出了什么问题时的原始答案：

IE 有一个长期存在的错误，它认为class 属性称为className，即使在getAttribute 中也是如此。 IE9 在命名错误的“兼容性”模式中继续存在此错误。在标准模式下，它是正确的。

最好的办法是完全避免这个问题，因为class 属性不需要使用getAttribute；改用反射属性：

name = newboxes[x].className;