Question

我有一个jQuery函数，它在mouseover的事件mouseout和<div>上使用类.myshp_list_product_image更改了src属性。

问题在于，当我将其中一个悬停时，它也会改变其他一个。
我怎样才能让它改变正在徘徊的那个？

这是函数的代码：

$(function() {
  $('.myshp_list_product_image').mouseover(function() {
    $('.myshp_list_product_image').each(function() {
      var $this = $(this);
      $this.attr('src', $this.attr('src').replace('1s', '2s'));
    });
  });
  $('.myshp_list_product_image').mouseout(function() {
    $('.myshp_list_product_image').each(function() {
      var $this = $(this);
      $this.attr('src', $this.attr('src').replace('2s', '1s'));
    });
  });
});

Answer 1

这里你不需要.each()，摆脱它。您只需要定位当前元素，即this。

$(function() {
    $('.myshp_list_product_image').mouseover(function() {
        var $this = $(this);
        $this.attr('src', $this.attr('src').replace('1s', '2s'));
    });
    $('.myshp_list_product_image').mouseout(function() {
        var $this = $(this);
        $this.attr('src', $this.attr('src').replace('2s', '1s'));
    });
});

我建议您使用mouseenter和mouseleave事件，mouseover和mouseenter之间的差异demo

Answer 2

只需定位当前悬停/悬停的元素，而不是迭代所有具有相同类的元素。

此外，您可以使用.hover而不是mouseover和mouseout以及.attr()的回调函数来最小化您的代码：

 $('.myshp_list_product_image').hover(
 function() {
    $(this).attr('src',function(i,oldattr){return oldattr.replace('1s', '2s')}); 
 }, function() {
    $(this).attr('src',function(i,oldattr){return oldattr.replace('2s', '1s')}); 
 });

Answer 3

我会使用jQuery的.hover（）

$(function () {
    $('.myshp_list_product_image').hover(function () { // mouse in
        var $this = $(this);
        $this.attr('src', $this.attr('src').replace('1s', '2s'));

    }, function () { // mouse out
        var $this = $(this);
        $this.attr('src', $this.attr('src').replace('2s', '1s'));

    });
});

如何通过它的类来实现jQuery的悬停div？

3 个答案: