Nis*_*ise 0 html javascript jquery
我试图在几个不同的图像上添加mouseup,mousedown,hover事件 - 唯一的问题是事件只发生在第一个图像上,尝试使用each()函数似乎不起作用.有关如何做到这一点的任何建议？
$(function() {
var filename = $('.imgover').attr('alt');
$('.rolloverimg').each(function(){
$('#'+ filename).mouseup(function(){
$(this).children("img").attr('src', 'content/images/buttons/'+ filename + '_up.png' );
}).mousedown(function(){
$(this).children("img").attr('src','content/images/buttons/' + filename + '_down.png');
});
$('#'+ filename).hover(
function () {
$(this).children("img").attr('src', 'content/images/buttons/'+ filename + '_hover.png');
},
function () {
$(this).children("img").attr('src', 'content/images/buttons/' + filename + '_up.png');
}
);
});
});
<div class="hdr-btns rolloverimg">
<a href="#"><img src="content/images/buttons/play_up.png" alt="play" id="play" class="imgover" /></a>
<a href="#"><img src="content/images/buttons/register_up.png" alt="register" id="register" class="imgover" /></a>
</div>
有没有必要实施的循环,以增加活动,使用jQuery多个元素.您只需将事件应用于选择器即可选择所需的所有元素.
例如,下面的代码添加的MouseUp和MouseDown事件中,以具有一个元素内的所有的img标签rolloverimg类:
$('.rolloverimg img').mouseup(function () {
alert('up')
}).mousedown(function () {
alert('down');
});
如果你想快速测试它,这里是从你的源代码开始创建的完整工作示例:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('.rolloverimg img').mouseup(function () {
alert('up')
}).mousedown(function () {
alert('down');
});
});
</script>
</head>
<body>
<div class="hdr-btns rolloverimg">
<a href="#"><img src="content/images/buttons/play_up.png" alt="play" id="play" class="imgover" /></a>
<a href="#"><img src="content/images/buttons/register_up.png" alt="register" id="register" class="imgover" /></a>
<input type="button" value="text" />
</div>
</body>
</html>
其他信息更新
如果您不想从div中选择所有img标记,而只是选择应用了类的img标记,则imgover可以使用以下选择器:
$(function () {
$('.rolloverimg img.imgover').mouseup(function () {
alert('up')
}).mousedown(function () {
alert('down');
});
});
附加信息update2
您可以使用访问当前选定的元素$(this).例如:
$('.rolloverimg img.imgover').mouseup(function () {
alert($(this).attr('id') + '_up')
}).mousedown(function () {
alert($(this).attr('id') + '_down');
});
如果以上内容有帮助或者您需要更具体的帮助,请告知我们.