Как я могу переключить URL для src, mouseover и mouseout - используя jQuery - PullRequest
Новая
       56

Как я могу переключить URL для src, mouseover и mouseout - используя jQuery

0 голосов
/ 29 июня 2018

У меня есть список товаров из примерно 90 товаров с изображениями, которые имеют атрибуты src, mouseover, mouseout. В основном, mouseout src - это то же самое, что и image src. Ролловер работает нормально, однако я бы хотел перевернуть текущую функциональность ролловера.

Например: изображение по умолчанию (до наведения) должно быть текущим изображением при опрокидывании, а изображение при опрокидывании (при наведении) должно быть изображением по умолчанию.

Текущий код: 

 <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);

Заранее спасибо, ребята.

1 Ответ

0 голосов
/ 29 июня 2018 

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