admin管理员组

文章数量:1415491

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. 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>

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. 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>
  • javascript
  • jquery
  • html
Share Improve this question asked Dec 10, 2010 at 10:58 NiseNiseNiseNise 1,1724 gold badges16 silver badges30 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 4

There is no need to implement a loop in order to add events to multiple elements using 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:

$('.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./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:

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

Additional info update2
You can access the currently selected element using $(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.

put the code:

var filename = $('.imgover').attr('alt');

inside the each function.

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.

You may just use $('.rolloverimg img').mouseup() etc.

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

本文标签： javascriptJquery add mouseup and mousedown event on several imagesStack Overflow

版权声明：本文标题：javascript - Jquery add mouseup and mousedown event on several images - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745191655a2646938.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。