Question

我修复了我的代码，但我的行为很糟糕。具体来说，当鼠标不再出现在'td.component'上时，按钮应该被隐藏，但是当鼠标在各种'td.component上快速移动时，其中一些元素仍会显示按钮。关于如何解决这个问题的任何想法？

感谢。

以下代码：

$(function() {

var $newButton = $('<button class = "new"><img class = icon src = "images/new.png" >new</img></button>');
var $deleteButton = $('<button class = "delete"><img class = icon src = "images/delete.png" >delete</img></button>');
var $saveButton = $('<button id = "save">Save</button>');

for (i = 42; i > 0; i--) {
    $table.append('<tr><td class = "number">' + i + 
        '</td><td class = "component"></td></tr>');

}

//appends to all 'td.component'
$('td.component').append($newButton).append($deleteButton);
//hides all buttons
$('button.new').hide();
$('button.delete').hide();


$('td.component').mouseover(function(e) {
    $(this).find('button.new').show();
    $(this).find('button.delete').show();
});


$('td.component').mouseout(function(e) {
    $(this).find('button.new').hide();
    $(this).find('button.delete').hide();
});

$('button.new').mouseout(function(e) {
    e.stopPropagation();
});

$('button.delete').mouseout(function(e) {
    e.stopPropagation();
});

}）;

Answer 1

您可以使用find：

$('td.component').mouseover(function(e) {

    $(this).find('button.new').show();
    $(this).find('button.delete').show();

});

这是jsfiddle。

鼠标离开后，您可能想要隐藏按钮。

正如@elzi指出的那样，如果你只是想在悬停时显示/隐藏它们，你最好使用CSS hover：

td.component button {
    display: none;
}

td.component:hover button {
    display: inline;  
}

（为简单起见忽略了类）

更新了jsfiddle。

Answer 2

您可以使用this来执行该元素的函数集。

$('td.component').mouseover(function(e) {
   $(this).find('button.new').show();
   $(this).find('button.delete').show();
});

这将找到该特定元素内的按钮。

.show（）：如何在特定元素上调用.show（）

2 个答案: