4

我在这里有一个解决这个问题的小提琴。

该脚本使用了一堆很酷的功能，但它在 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 作为默认浏览器进行编程的危险......

4

1 回答 1

2

我弄清楚为什么这个脚本在 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 中一直运行。

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

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

于 2013-05-14T09:14:35.057 回答