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

2 つの理由があります。

このコードを呼び出すと:

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

IE は最初に 16 進数値を返します (この場合は#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 に答える