Javascript JQuery-脚本可以在除IE10之外的所有环境中工作

我这里有一个

该脚本使用了一系列很酷的函数，但在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>

过滤器和控件
皮革工程师


实习工程师


高级工程师
工程师
标题1
标题2
信息1
信息2
见习工程师
标题1
标题2
信息1
信息2
高级工程师
标题1
标题2
信息1
信息2

---

啊，使用Chrome作为默认浏览器编程的危险…

我弄明白了为什么这个脚本在IE10中不起作用D

原因有两个：

当您调用此代码时：

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

IE首先返回十六进制值（在本例中为

#8be79c

）

然后，对脚本的后续调用将返回一个rgb值（

rgb（139231156）

）（注意缺少空格），对吗

当我最初编写脚本时，我使用了

alert（）

来找出

.css（）

返回的颜色，它给了我

rgb（139231156）

（来自Chrome，带空格！），所以这就是脚本想要的

替换：

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

与：

意味着它现在可以在Chrome和IE 10中一直工作

希望这能帮助那些碰巧遇到这个不寻常问题的人

---

感谢您对调试的有益评论，它帮助我解决了问题

IE10中的javascript调试器与其他版本的IE中的调试器相同。它位于开发工具中（按F12）。查看“脚本”选项卡下的内容。查看此链接了解完整详细信息：使用类名来表示您要确定的任何条件可能比查看看起来有点粗糙的颜色更容易。如果确实需要跨浏览器检查和/或操作元素上的颜色，请查看。

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