javascript – JQuery – 脚本工作除了IE10以外的一切

我这里有一个fiddle for this problem.

该脚本使用了许多很酷的函数,但它在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作为默认浏览器进行编程的危险啊…

解决方法:

我弄清楚为什么这个脚本不能在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,javascript,cross-browser,internet-explorer-10
来源： https://codeday.me/bug/20190703/1369859.html