0

gmailで見られるようなものを達成しようとしています。カーソルを合わせるとテキストの色が変わり、クリックするとテキストの色が赤に変わります。他の行をクリックすると、同じことが起こります。ただし、私の場合、初心者の知識のために何かが欠けています。前のクリックでテキストが赤色のままになるため、前のクリックのバインドを解除する必要があります。

$("#index td").hover(
            function() {
                $(this).css( {'background': '#e9e7e7',
                              'cursor': 'pointer'});
            },
            function () {
                $(this).css({'background': '#ffffff',
                              'cursor': 'pointer'});
            }
        ).click(function(){
            $(this).css({ 'color': 'red'});
        });

編集

<tr style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); cursor: pointer; background-position: initial initial; background-repeat: initial initial; " class="selected"><td style="padding:2.5px 0px 2.5px 2px;">XYZZZZ</td></tr>
4

3 に答える 3

1

ホバー イベントは CSS で、クリックは JS で処理したほうがよいと思います。以下に例を示します: http://jsfiddle.net/ZmNN/1/

于 2012-05-08T20:54:00.580 に答える
1

私の理解が正しければ、クリックした行に以前に設定されていた赤色をリセットする必要があります。

その場合、クリック内で他のすべての色をデフォルトに設定する必要があります。

    var $tds = $("#index td");
    //..
    //..
    .click(function(){
        $tds.css({'background': '#ffffff',
                          'cursor': 'pointer'});

        $(this).css({ 'color': 'red'});
    });

または、適切な方法は、2 つの css クラスを定義し、1. ハイライト 2. を選択して、それに応じて追加/削除することです。

CSS:

.highlight { background: '#ffffff', cursor: 'pointer'}
.selected { color: 'red'; }

JS:

    var $tds = $("#index td");

    $tds.hover(
        function() {
            $(this).addClass('highlight');
        }, function () {
            $(this).removeClass('highlight');
        }
    ).click(function(){
        $tds.removeClass('selected');
        $(this).addClass('selected');
    });

注: 私が間違っていなければ、通常、そのようなことはtrs ではなくtdsに適用されます。

于 2012-05-08T20:47:19.757 に答える
0

質問を完全に理解しているかどうかはわかりませんが、 one（）関数が必要になると思います。

$("#foo").one("click", function(){
    alert("This will be displayed only once.");
});

上記は基本的にこれを行うことと同等です：

$("#foo").bind("click", function(e) {
    alert("This will be displayed only once.");
    $(this).unbind(e);
});
于 2012-05-08T20:49:53.287 に答える