jquery - 如何切换 src、mouseover 和 mouseout 的 url - 使用 jQuery

Question

我有大约 90 件商品的产品列表，其中包含 src、mouseover、mouseout 属性的图像。基本上 mouseout src 与 image src 相同。翻转工作正常，但我想翻转当前翻转功能。

eg：默认图像（悬停前）应该是当前的翻转图像，翻转图像（悬停时）应该是默认图像。

当前代码：

 <div class="item">
    <a href="productURL"class="product-image">
        <img id="product-collection-image"
            src="http://imageUrl-1xxxxxxxxx.jpg" alt="product name"
            onmouseover="this.src='http://imageUrl-over-1xxxxxxx.jpg';" 
            onmouseout="this.src='http://imageUrl-1xxxxxxx.jpg';" />
    </a>
 </div>

<div class="item">
    <a href="productURL"class="product-image">
        <img id="product-collection-image"
            src="http://imageUrl-2xxxxxxx.jpg" alt="product name"
            onmouseover="this.src='http://imageUrl-over-2xxxxxxx.jpg';" 
            onmouseout="this.src='http://imageUrl-2xxxxxxx.jpg';" />
    </a>
</div>

<div class="item">
    <a href="productURL"class="product-image">
        <img id="product-collection-image"
            src="http://imageUrl-3xxxxxxx.jpg" alt="product name"
            onmouseover="this.src='http://imageUrl-over-3xxxxxxx.jpg';" 
            onmouseout="this.src='http://imageUrl-3xxxxxxx.jpg';" />
    </a>
</div>

期望的结果：

 <div class="item">
    <a href="productURL"class="product-image">
        <img id="product-collection-image"
            src="http://imageUrl-over-1xxxxxxx.jpg" alt="product name"
            onmouseover="this.src='http://imageUrl-1xxxxxxxxx.jpg';" 
            onmouseout="this.src='http://imageUrl-over-1xxxxxxx.jpg';" />
    </a>
 </div>

<div class="item">
    <a href="productURL"class="product-image">
        <img id="product-collection-image"
            src="http://imageUrl-over-2xxxxxxx.jpg" alt="product name"
            onmouseover="this.src='http://imageUrl-2xxxxxxx.jpg';" 
            onmouseout="this.src='http://imageUrl-over-2xxxxxxx.jpg';" />
    </a>
</div>

<div class="item">
    <a href="productURL"class="product-image">
        <img id="product-collection-image"
            src="http://imageUrl-over-3xxxxxxx.jpg" alt="product name"
            onmouseover="this.src='http://imageUrl-3xxxxxxx.jpg';" 
            onmouseout="this.src='http://imageUrl-over-3xxxxxxx.jpg';" />
    </a>
</div>

这是我目前拥有的：

var items = $(".item a");
var imgSrc = items.children('img').map(function(){
    return $(this).attr('src');
}).get();

var hoverSrc = items.children('img').map(function(){
    return $(this).attr('onmouseover').slice();
}).get();

    console.log(hoverSrc);

提前谢谢各位。

标签： jquerymouseeventsrcrollover

Answer 1

$('.item .product-image img').each(function(index, image){
  //get the over logic
  var mouseover = image.getAttribute('onmouseover');
  //get the out logic
  var mouseout = image.getAttribute('onmouseout');
  
  //execute the over logic so it will change the src to be the over url
  image.onmouseover();
  //swap the over and out logic for each other
  image.setAttribute('onmouseover', mouseout);
  image.setAttribute('onmouseout', mouseover);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <a href="productURL" class="product-image">
    <img id="product-collection-image" src="http://imageUrl-1xxxxxxxxx.jpg" alt="product name" onmouseover="this.src='http://imageUrl-over-1xxxxxxx.jpg';" onmouseout="this.src='http://imageUrl-1xxxxxxx.jpg';" />
  </a>
</div>

<div class="item">
  <a href="productURL" class="product-image">
    <img id="product-collection-image" src="http://imageUrl-2xxxxxxx.jpg" alt="product name" onmouseover="this.src='http://imageUrl-over-2xxxxxxx.jpg';" onmouseout="this.src='http://imageUrl-2xxxxxxx.jpg';" />
  </a>
</div>

<div class="item">
  <a href="productURL" class="product-image">
    <img id="product-collection-image" src="http://imageUrl-3xxxxxxx.jpg" alt="product name" onmouseover="this.src='http://imageUrl-over-3xxxxxxx.jpg';" onmouseout="this.src='http://imageUrl-3xxxxxxx.jpg';" />
  </a>
</div>