0

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

您还可以在此 jsfiddle 中的 My Code 中找到代码

我的 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;
}
4

2 回答 2

1

Kolink has the correct answer as to why the problem is occuring, but if you have the option of using JQuery I recommend the following solution (fiddle) which is more stable for cross browser coding.

The core change is this JQuery selector and the JQuery toggle function;

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

I used three features of JQuery selector here.

The first selection feature used is the multiple-attribute selector which itself is a combination of two attribute equals selectors as requirements:

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

The second selection feature used is the id selector:

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

The third selection feature used is the multiple selector which allows us to combine the previous selections into a list of separate criteria sets (selections returned match at least one of the sets of criteria, each set being separated by a comma):

//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');
于 2013-04-12T14:02:51.260 回答
1

classList只添加到 IE10。之前的任何版本都不支持。请参阅此 MDN 文章以获取 shim。

于 2013-04-12T12:42:22.030 回答