2

HTML テーブルのセルにクリック アクションを追加しようとしています。

これが私のJavascriptです：

$(document)
    .ready(

function () {
    function setColor(cell) {
        var cssRed = {
            "color": '#ff0000'
        }
        var cssBlue = {
            "color": '#0000ff'
        }
        if (cell.css('color') == '#ff0000') cell.css(cssBlue);
        else cell.css(cssRed);
    }
    $('td').click(function () {
        setColor($(this));
    });
});

そして、これが私のHTMLです

    <table style="text-align: center" border='1'>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>

クリックされたセル内のテキストの色を変更するはずです。http://whenisgood.comのグリッドに似たものを作ろうとしています

何故か（メソッドelse内に）if文を入れ続けているのに。setColorしたがって、明らかにこの比較cell.css('color') == '#ff0000'は毎回失敗します。ここで何が間違っていましたか？

編集：私はアラートを作成しました。これcells.css('color')が出力です：最初はrgb(11,4,0)

もう一度クリックした後：rgb(255,0,0)

edit2: 最初は色をblue文字どおりredに割り当ててみました。ただし、機能しません（ と を比較していたとしてもblue）red。Javascript はredHex または RGB でマーシャリングしないと思いますよね?

edit3: 反対票を投じる場合は、理由を教えてください。質問を更新して改善します。

4

2 に答える 2

2

人々が示唆しているように、ブラウザが異なれば、色に対して異なる値が返される場合があります。

jQueryのcss()ドキュメントはこれを確認しています。

異なるブラウザーは、論理的には等しいがテキスト的には等しくない CSS カラー値を返す場合があります (例: #FFF、#ffffff、および rgb(255,255,255))。

したがって、代わりに CSS クラスに依存することをお勧めします。

CSS

.red {
    color: #ff0000;
}
.blue {
    color: #0000ff;
}

jQuery

$(document)
.ready(
        function() {
            function setColor(cell){
                var shouldSwitch = cell.hasClass("red");
                cell.toggleClass("red", !shouldSwitch);
                cell.toggleClass("blue", shouldSwitch);

            }
                $('td').click(function(){
                    setColor($(this));
                  });
            });

これが実際のデモです。

于 2012-11-07T02:33:12.850 に答える
1

tdのデフォルトの色は赤だと思います。

したがって、CSSを次のように設定するだけです。

td{color:#ff0000;}
td.highlight{color:#0000ff;}

とスクリプト

$(document).ready(function () {
    function setColor(cell) {
        $(this).toggleClass('highlight');
    }
    $('td').click(setColor);
});

http://jsfiddle.net/zqytM/でのデモ

于 2012-11-07T04:19:53.653 に答える