Fatal编程技术网
  • javascript/
  • Javascript Jquery在多个图像上添加mouseup和mousedown事件

Javascript Jquery在多个图像上添加mouseup和mousedown事件

javascript jquery html

Javascript Jquery在多个图像上添加mouseup和mousedown事件,javascript,jquery,html,Javascript,Jquery,Html,我试图在几个不同的图像上添加mouseup，mousedown，hover事件-唯一的问题是该事件只发生在第一个图像上， 尝试使用each（）函数似乎不起作用。 有没有关于我如何做到这一点的建议 $(function() { var filename = $('.imgover').attr('alt'); $('.rolloverimg').each(function(){ $('#'+ filename).mouseup(function(){ $(this).

我试图在几个不同的图像上添加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>

$（函数（）{
var filename=$（'.imgover'）.attr（'alt'）；
$（'.rolloverimg'）。每个（函数（）{
$（'#'+文件名）.mouseup（函数（）{
$（this.children（“img”）.attr（'src'，'content/images/buttons/'+filename+''u up.png'）；
}).mousedown（函数（）{
$（this.children（“img”）.attr（'src'，'content/images/buttons/'+filename+'_down.png'）；
});
$（“#”+文件名）。悬停(
函数（）{
$（this.children（“img”）.attr（'src'，'content/images/buttons/'+filename+''u hover.png'）；
},
函数（）{
$（this.children（“img”）.attr（'src'，'content/images/buttons/'+filename+''u up.png'）；
}
);
});
});
输入代码：

var filename=$（'.imgover'）.attr（'alt'）

在每个函数内。

输入代码：

var filename=$（'.imgover'）.attr（'alt'）

在每个函数的内部。

这里有一个：

当然，只需替换attr（'alt'，'in'）即可（设置src属性），这只是显示选择元素逻辑的一种简单方法。

以下是一个：

当然，只要替换attr（'alt'，'in'）即可（设置src属性），这只是一种显示选择元素逻辑的简单方法。

无需实现循环，即可使用jQuery向多个元素添加事件。您可以简单地将事件应用于选择器，该选择器选择您需要的所有元素

例如，以下代码将MouseUp和MouseDown事件添加到具有
rolloverimg
类的元素内的所有img标记中：

$('.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>
其他信息更新2
您可以使用
$（this）
访问当前选定的元素。例如：

$('.rolloverimg img.imgover').mouseup(function () {
    alert($(this).attr('id') + '_up')
}).mousedown(function () {
    alert($(this).attr('id') + '_down');
});
请让我知道以上内容是否有帮助，或者您是否需要更具体的帮助。

无需实现循环，以便使用jQuery向多个元素添加事件。您可以简单地将事件应用于选择器，该选择器选择您需要的所有元素

例如，以下代码将MouseUp和MouseDown事件添加到具有
rolloverimg
类的元素内的所有img标记中：

$('.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>
其他信息更新2
您可以使用
$（this）
访问当前选定的元素。例如：

$('.rolloverimg img.imgover').mouseup(function () {
    alert($(this).attr('id') + '_up')
}).mousedown(function () {
    alert($(this).attr('id') + '_down');
});
请告诉我上述内容是否有帮助，或者您是否需要更具体的帮助。

您可以使用$（'.rolloverimg'）.mouseup（）等

您可以只使用$（'.rolloverimg'）.mouseup（）等

对它是在执行每个循环之前设置文件名，以便使用它在整个循环中找到的第一个文件名。通过将其放入函数中，可以将文件名更改为当前的alt属性。是。它是在执行每个循环之前设置文件名，以便使用它在整个循环中找到的第一个文件名。通过将其放入函数中，您将文件名更改为当前的alt属性。是的，但它需要是动态的，因为并非所有图像都具有相同的名称。@NiseNise，不确定您的意思。我不是按名称选择，而是按“标记名”选择。在本例中，图像是使用img标记表示的，我正在选择元素中应用rolloverimg类（本例中为容器div）的所有img标记。是的，但我需要它知道该图像的id，因为使用您的方法，它所做的只是用mouseup和mousedown上的第一个图像替换第二个图像。@NiseNise，我想我知道你需要什么。我会更新我的答案。嗯，这仍然不起作用。。。var filename=$（'.imgover'）.attr（'src'）$（'.rolloverimg img.imgover'）.mouseup（函数（）{alert（'up:'+filename）}）.mousedown（函数（）{alert（'down:'+filename）；}）；是的，但它需要是动态的，因为并非所有图像都有相同的名称。@NiseNise，不确定您的意思。我不是按名称选择，而是按“标记名”选择。在本例中，图像是使用img标记表示的，我正在选择元素中应用rolloverimg类（本例中为容器div）的所有img标记。是的，但我需要它知道该图像的id，因为使用您的方法，它所做的只是用mouseup和mousedown上的第一个图像替换第二个图像。@NiseNise，我想我知道你需要什么。我会更新我的答案。嗯，这仍然不起作用。。。var filename=$（'.imgover'）.attr（'src'）$（'.rolloverimg img.imgover'）.mouseup（函数（）{alert（'up:'+filename）}）.mousedown（函数（）{alert（'down:'+filename）；}）；