javascript - 为什么内联 JavaScript 在 Internet Explorer 9 中不起作用？

Question

我正在编写一个 PHP 网站并有一个博客。我有一个评论字段(适用于所有博客文章)，其中有一个文本区域和一个 div 标记中的提交按钮，但我似乎无法在 Internet Explorer 中使用它。它在谷歌浏览器中运行良好。谁能告诉我我做错了什么并指出我正确的方向。

您还可以在 My Code in this jsfiddle 找到代码

我的 PHP HTML 模板如下所示:

<div class="blogbubble">
<table border="0" align="right" width="100%">
    <tr>
        <td rowspan="2" valign="top" width="60px"></td>
        <td align="right"><font size="2"></font>
        </td>
    </tr>
    <tr>
        <td valign="top">   <b><font size="4">Hello</font></b>
            <br /><font size="3">Hello</font>
        </td>
    </tr>
</table>
<div class="show_hide" id="comnr">
    <hr>
    <table border="0">
        <tr>
            <td>
                <textarea id="message" name="message" rows="5" style="width:300px;margin-left:60px"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <button style="float:right">Comment</button>
            </td>
        </tr>
    </table>
    <hr>
    <button style="float:right" onclick= 'document.getElementById("comnr").classList.toggle("show_hide")&document.getElementById("comknap").classList.toggle("show_hide")'>Cancel</button>
</div>
<button id="comknap" onclick='document.getElementById("comnr").classList.toggle("show_hide")&document.getElementById("comknap").classList.toggle("show_hide")'>Comment</button>

我的CSS:

.show_hide { display:none; }

.blogbubble {
    background-color: #4D4D4D;
    width: 95%;
    float: left;
    padding: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    overflow: none;
    margin-right: 5px;
    margin-bottom:5px;
}

Answer 1

Kolink 对于问题发生的原因有正确的答案，但如果您可以选择使用 JQuery，我建议使用以下 solution (fiddle)这对于跨浏览器编码来说更加稳定。

核心变化是这个JQuery selector和 JQuery toggle function ;

 $('[id="comnr"][class="show_hide"],#comknap').toggle();

我在这里使用了 JQuery 选择器的三个功能。

使用的第一个选择功能是 multiple-attribute selector它本身是两个 attribute equals selectors 的组合根据要求:

//A selection of elements whose id is "comnr" and whose class is "show_hide"
var selectionByMultipleRequirements= $('[id="comnr"][class="show_hide"]');

使用的第二个选择功能是 id selector :

//A selection of elements whose id is "comknap"
var selectionById = $('#comknap');

使用的第三个选择功能是 multiple selector这允许我们将之前的选择组合成一个单独的条件集列表(返回的选择至少匹配其中一组条件，每组用逗号分隔):

//A selection of elements who either have an id of "comnr" and whose class is "show_hide" OR have an id of "comknap"
var selectionByMultipleCriteria = $('[id="comnr"][class="show_hide"],#comknap');