jQuery在多个图像上添加mouseup和mousedown事件
[英]Jquery add mouseup and mousedown event on several images
问题描述
I am trying to add a mouseup, mousedown, hover event on several different images - the only problem is that the event only occurs on the first image, tried using the each() function does not seem to be working. 
我正在尝试在几个不同的图像上添加mouseup，mousedown，hover事件-唯一的问题是该事件仅发生在第一张图像上，尝试使用each（）函数似乎不起作用。 Any suggestions on how I can do this? 关于如何执行此操作的任何建议？
$(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>
4 个解决方案
解决方案1
5 已采纳 2010-12-10 11:17:27
There is no need to implement a loop in order to add events to multiple elements using jQuery. 无需实现循环即可使用jQuery将事件添加到多个元素。 You can simply apply the events to a selector that selects all the elements that you need. 您只需将事件应用于选择器即可选择所需的所有元素。
For example, the following code adds MouseUp and MouseDown events to all the img tags inside an element that has the rolloverimg class: 例如，以下代码将MouseUp和MouseDown事件添加到具有rolloverimg类的元素内的所有img标签中：
$('.rolloverimg img').mouseup(function () {
alert('up')
}).mousedown(function () {
alert('down');
});
And if you want to quick test it, here is the full working example that was created starting from your source code: 而且，如果您想对其进行快速测试，以下是从源代码开始创建的完整示例：
<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>
Additional info update 附加信息更新
If you do not want to select all the img tags from the div, but rather just the ones that have the imgover class applied to them, you can use the following selector: 如果您不想从div中选择所有img标签，而只是选择将imgover类应用于它们的imgover ，则可以使用以下选择器：
$(function () {
$('.rolloverimg img.imgover').mouseup(function () {
alert('up')
}).mousedown(function () {
alert('down');
});
});
Additional info update2 附加信息更新2
You can access the currently selected element using $(this) . 您可以使用$(this)访问当前选定的元素。 For example: 例如：
$('.rolloverimg img.imgover').mouseup(function () {
alert($(this).attr('id') + '_up')
}).mousedown(function () {
alert($(this).attr('id') + '_down');
});
Please let me know if the above helps or if you need more specific help. 如果上述帮助或您需要更多具体帮助，请告诉我。
解决方案2
1 2010-12-10 11:03:12
put the code: 输入代码：
var filename = $('.imgover').attr('alt'); var filename = $（'。imgover'）。attr（'alt'）;
inside the each function. 在每个函数中。
解决方案3
0 2010-12-10 11:08:10
Here is a simple way to do it : 这是一种简单的方法 ：
$('.rolloverimg').mouseover(function() {
$('img', this).each(function () {
$(this).attr('alt', $(this).attr('id') + '_over');
})
}).mouseout(function() {
$('img', this).each(function () {
$(this).attr('alt', $(this).attr('id') + '_out');
})
});
Of course, juste replace the attr('alt', 'in') to do what you need (set the src attribute), it is just a simple way to show the logic of selecting the elements. 当然，只需替换attr（'alt'，'in'）即可完成所需的工作（设置src属性），这只是显示选择元素逻辑的一种简单方法。
解决方案4
0 2010-12-10 11:18:35
You may just use $('.rolloverimg img').mouseup() etc. 您可以只使用$（'。rolloverimg img'）。mouseup（）等。
$('.rolloverimg img').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');
});
$('.rolloverimg img').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');
}
);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.