Question

我正在尝试实现我们在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>

Answer 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');
    });

注意：如果我没有记错，这些事情通常适用于tr s而非td s

Answer 2

我认为你最好用CSS处理悬停事件并用JS点击。以下是一个示例：http://jsfiddle.net/ZmcNN/1/

Answer 3

我不确定我是否完全理解这个问题，但我认为您可能需要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);
});

鼠标点击更改文本的颜色并取消绑定之前单击的文本

3 个答案: