-4

我找到了这段代码，它是我问题的完美解决方案，但我发现它在 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/

4

1 回答 1

4

您的编辑使问题更清楚：

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

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

你没有name在任何地方声明，所以你name在一些包含范围内使用（可能是全局范围，例如，window.name）。显然 IE9 认为这是一个只读属性，尽管我找不到任何文档来支持它。

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

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

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

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

name = newboxes[x].className;
于 2012-07-10T15:55:13.447 回答