.show():如何在特定元素上调用.show()

.show(): how to call .show() on a specific element

本文关键字：show 元素 调用      更新时间：2023-09-26

我修复了我的代码，但我有故障的行为。具体来说，当鼠标不在"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();
});

});

您可以使用find:

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

这是一个jsfield。

你可能想要隐藏按钮一旦鼠标离开。

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

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

(为简单起见忽略了类)

jsfiddle更新。

您可以使用this在该元素上执行一组函数。

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

这将查找特定元素中的按钮。

相关文章：