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/ZmcNN/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 回答