Question

该脚本使用了许多很酷的函数，但它在IE10上什么也没做。

我不知道它的哪一部分不同意，IE10是否有可用的Javascript调试器，或者有人能看到我做错了什么？

$(function (){
    $('.roleCheck').click(function () {
        var check = $(this).attr('id');
        var id = check.substr(check.length - 1).toString();
        var field = "#fieldSet" + id;
        var oldCol = $(this).css("background-color");
        if (oldCol == "rgb(139, 231, 156)") {
            $(this).css("background-color", "#fc8b6a");
            $(field).hide();
            $(this).find('span').text("Show");
        }
        else {
            $(this).css("background-color", "#8be79c");
            $(field).show();
            $(this).find('span').text("Hide");
        }
    });
});

以下是使用它的精确版本：

<div id="columns">
    <div class="columns left">
        <fieldset>
            <legend>Filters and Controls</legend>
            <div class="roleCheck" id="check0">
                <span>Hide</span> Engineer
            </div>
            <br />
            <div class="roleCheck" id="check1">
                <span>Hide</span> Trainee Engineer
            </div>
            <br />
            <div class="roleCheck" id="check2">
                <span>Hide</span> Senior Engineer
            </div>
        </fieldset>
    </div>
    <div class="columns right">
        <fieldset id="fieldSet0">
            <legend>Engineer</legend>
            <table>
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Info 1</td>
                        <td>Info 2</td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <fieldset id="fieldSet1">
            <legend>Trainee Engineer</legend>
            <table>
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Info 1</td>
                        <td>Info 2</td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <fieldset id="fieldSet2">
            <legend>Senior Engineer</legend>
            <table>
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Info 1</td>
                        <td>Info 2</td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
    </div>
</div>

使用Chrome作为默认浏览器进行编程的危险啊......

Answer 1

我弄清楚为什么这个脚本在IE10中不起作用！：d

有两个原因：

当您拨打此代码时：

var oldCol = $(this).css("background-color");

IE首先返回一个十六进制值（在本例中为#8be79c）

然后对脚本的后续调用返回一个rgb值（rgb(139,231,156)）（注意缺少空格）奇怪吧？

当我最初编写脚本时，我使用alert()来查找.css()返回的颜色，它给了我rgb(139, 231, 156)（来自Chrome，带有空格！）这就是什么该剧本正在寻找。

更换：

var oldCol = $(this).css("background-color");
if (oldCol == "rgb(139, 231, 156)") {

使用：

var oldCol = $(this).css("background-color").replace(/ /g,'');
if (oldCol == "rgb(139,231,156)" || oldCol == "#8be79c") {

意味着它现在可以在Chrome和IE 10中一直运行。

希望这可以帮助碰巧碰到这个相当不寻常的问题的其他人。

感谢有关调试的有用评论，它帮助我找出了问题！

JQuery - 脚本在除IE10之外的所有工作

1 个答案: