JQuery - 除了IE10以外的所有浏览器都能正常工作

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作为默认浏览器进行编程的危险......

- Felix Weir

---

IE10中的JavaScript调试器与其他版本的IE中的相同。它在开发人员工具中（按F12键）。请在“脚本”选项卡下查找。 - Paul Welbourne

请查看此链接以获取完整详情：http://msdn.microsoft.com/zh-cn/library/ie/gg699336(v=vs.85).aspx - Paul Welbourne

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中始终正常工作。

希望这能帮助其他遇到这个相当不寻常问题的人。

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

- Felix Weir

---

使用类名来表示您要确定的任何条件可能更容易，而不是查看颜色，这似乎有点繁琐。如果您确实需要检查和/或操作跨浏览器的元素上的颜色，请查看jQuery Color插件。 - Dave Methvin