jQuery在多個圖像上添加mouseup和mousedown事件

Question

我正在嘗試在幾個不同的圖像上添加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>

Answer 1

無需實現循環即可使用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>

附加信息更新
如果您不想從div中選擇所有img標簽，而只是選擇將imgover類應用於它們的imgover ，則可以使用以下選擇器：

$(function () {
    $('.rolloverimg img.imgover').mouseup(function () {
        alert('up')
    }).mousedown(function () {
        alert('down');
    });
});

附加信息更新2
您可以使用$(this)訪問當前選定的元素。 例如：

$('.rolloverimg img.imgover').mouseup(function () {
    alert($(this).attr('id') + '_up')
}).mousedown(function () {
    alert($(this).attr('id') + '_down');
});

如果上述幫助或您需要更多具體幫助，請告訴我。

Answer 2

輸入代碼：

var filename = $（'。imgover'）。attr（'alt'）;

在每個函數中。

Answer 3

這是一種簡單的方法：

$('.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');
    })
});

當然，只需替換attr（'alt'，'in'）即可完成所需的工作（設置src屬性），這只是顯示選擇元素邏輯的一種簡單方法。

Answer 4

您可以只使用$（'。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');
      }
    );

jQuery在多個圖像上添加mouseup和mousedown事件

問題描述

4 個解決方案

解決方案1
5 已采納 2010-12-10 11:17:27

解決方案2
1 2010-12-10 11:03:12

解決方案3
0 2010-12-10 11:08:10

解決方案4
0 2010-12-10 11:18:35

jQuery在多個圖像上添加mouseup和mousedown事件

問題描述

4 個解決方案

解決方案1 5 已采納 2010-12-10 11:17:27

解決方案2 1 2010-12-10 11:03:12

解決方案3 0 2010-12-10 11:08:10

解決方案4 0 2010-12-10 11:18:35

解決方案1
5 已采納 2010-12-10 11:17:27

解決方案2
1 2010-12-10 11:03:12

解決方案3
0 2010-12-10 11:08:10

解決方案4
0 2010-12-10 11:18:35