.show():如何在特定元素上调用.show()
.show(): how to call .show() on a specific element
我修复了我的代码,但我有故障的行为。具体来说,当鼠标不在"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();
});
这将查找特定元素中的按钮。
相关文章:
- jQuery show/fadeIn不将display:block应用于隐藏的父元素内的子元素-仅限FireFox
- 基于参数(angular)调用特定元素上的ng show
- ng-show 不更新 DOM 元素
- Show() Hide () 元素而不带 CSS
- 如何通过不同的视图/控制器在特定元素上设置 ng-show
- 仅限 Firefox/IE - 元素 show() jquery 后冻结的 gif 动画
- jquery show() 元素与列表项相关 - 不显示任何内容
- jquery show() 在 IE 7 中移动其他元素
- jquery“show”效果显示错误的元素
- JQuery Show在某些元素上不起作用
- show() 在元素隐藏时不起作用
- IE:jQuery.show() 仅在显示之前/之后使用 alert() 时显示元素
- 使用 Hide()/Show() 隐藏数组中 jQuery 元素的集合
- show/hide() 更改块级元素的宽度/行为
- 是否可以使用show/hide javascript来显示具有相同onclick命令的2个元素
- 如何将元素设置为默认条件(hide())以及单击时(show())
- Angular:使用$last使最后一个元素使用ng-show可见
- 如何防止嵌套的Bootstrap collapse元素在父级上激发.show()
- 通过start()函数而不是show()元素添加throbber
- Angular.js:当$state.current.name是某个值时,ng-show元素