javascript - 使用 jquery 在 div 内动态更改图像

Question

1. 我有四个保存图像的 div

2. 我正在使用翻转卡片的效果，目前有效，here is the fiddle 这样你就明白我的意思了。

3. 现在我想在每次用户经过图像时更改每个 div 的图像。 为此，我创建了四个数组

   var arrFirstYellowCard = ["http://i.jootix.com/r/Flower-1920x1080.jpg", "http://7art-screensavers.com/screenshots/wet-flowers/incredible-orange-flower.jpg", "http://www.hdwallpapers.in/walls/big_yellow_flower-HD.jpg"];
   var arrSecondPurpleCard = ["http://www.dazzlewallpapers.com/wp-content/uploads/2012/07/Lotus-Flower-5.jpg", "hhttp://7art-screensavers.com/screenshots/wet-flowers/wet-violet-flower.jpg"];
   var arrThirdVectorFlower = ["http://0.tqn.com/d/rubberstamping/1/0/6/m/-/-/flower-outline.png", "http://openclipart.org/people/PeterM/PeterM_Flower_2.svg"];
   var arrfourthCrazyArt = ["http://www.bitrebels.com/wp-content/uploads/2012/11/electrocuted-flowers-robert-buelteman-1.jpg", "http://loadpaper.com/large/Flowers_wallpapers_251.jpg"];
   

例如第一个div:

<section class="card-container">
    <div class="card over" data-direction="right">
        <div class="front">
            <h2>yellow flowers</h2>

            <h4>(Right)</h4>

        </div>
        <div class="back">
            <img src="CHANGE IMAGE DYNAMICALLY USING ARRAY arrFirstYellowCard" width="100%;" height="100%;" alt="" />
        </div>
    </div>
</section>

我如何根据用户是否将鼠标悬停在卡片上来动态更改数组中每个 div 的图像？

所以

1. 用户第一次悬停时，div 更改数组中的第一个图像并显示
2. 第二次用户将鼠标悬停在 div 上时，第二张图片由数组中的第二张图片地址更改...

请看看我的 fiddle 。我将如何添加此功能？

更新:

按照我所做的回答建议:

var arrFirstYellowCard = ["http://7art-screensavers.com/screenshots/wet-flowers/incredible-orange-flower.jpg", "http://www.hdwallpapers.in/walls/big_yellow_flower-HD.jpg"];
var arrSecondPurpleCard = ["http://www.dazzlewallpapers.com/wp-content/uploads/2012/07/Lotus-Flower-5.jpg", "hhttp://7art-screensavers.com/screenshots/wet-flowers/wet-violet-flower.jpg"];
var arrThirdVectorFlower = ["http://0.tqn.com/d/rubberstamping/1/0/6/m/-/-/flower-outline.png", "http://openclipart.org/people/PeterM/PeterM_Flower_2.svg"];
    
        
$(function () {
    $('.over').hover(function () {
        
        if ($(this).attr('data-direction') == 'right') {
            $(this).addClass('flipping-right');
        }   
        if ($(this).attr('data-direction') == 'left') {
            $(this).addClass('flipping-left');
        }
        
    }, function () {
        if ($(this).attr('data-direction') == 'right'){    
            $(this).removeClass('flipping-right');
            var img = $(this).find('img');
            setTimeout(function() {
               img.attr('src', arrFirstYellowCard[i]);
               i++;
               if(i > arrFirstYellowCard.length-1)
                  i=0;
           }, 800);
        }
        if ($(this).attr('data-direction') == 'left'){    
            $(this).removeClass('flipping-left');
            var img = $(this).find('img');
            setTimeout(function() {
               img.attr('src', arrSecondPurpleCard[i]);
               i++;
               if(i > arrSecondPurpleCard.length-1)
                  i=0;
           }, 800);
        }
        
        
    });
})

但它似乎不起作用，有人可以帮我解决这个问题吗 here is the fiddle

Answer 1

您可以在更新的 jsfiddle 中找到所请求功能的示例.为了简单起见，我只留下了一张卡片。我在数组中迭代，在部分中查找图像并更改它的 src 属性。 setTimeout 用于延迟 src 的变化，以确保卡被翻转并使用时不会立即看到变化。

主要部分是:

var img = $(this).find('img');
img.attr('src', arrFirstYellowCard[i]);

并在每次调用时递增 i，并在它超过数组长度时变回 0。