Question

当有人在Class of 2013上方悬停时，我想显示（淡入）数组中的所有图片。

到目前为止，我可以悬停在...上方显示一张图片

我可以将它们全部发送到同一个<img src...吗？

问题是，我有3个类 - 2013, 2014, 2015 ...并且每个图像路径数组的长度都不同...所以我想动态输入正确的{{1}个数字}元素显示每个类的给定数量的图像。

这是我目前的代码：

img src

Answer 1

为方便起见，我会将所有classes数组存储在一个对象中，如下所示：

var classes = { 
    2011: [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg'],
    2012: [
    'image4.jpg'
    'image5.jpg'],
    2013: [
    'image6.jpg']
};

然后，使用属性将有关您要显示的年份的信息放在DOM元素中。您可以使用id或data-attribute。

然后，javascript代码看起来像这样：

$(element).on('mouseover', function(e){

    // First, empty the overlay element to avoid images
    // to be added over and over again.
    $('#overlay').empty();

    // Let's dynamically change the title accessing the
    // data stored in our element (I assumed it was id)
    var title = $('<h2>');
    title.text('Class of ' +  e.target.id);
    $('#overlay').append(title);

    // Loop through the target array and add an image tag
    // for each element of your images array.
    $(classes[e.target.id]).each(function(idx, entry){
      var img = $('<img/>');
      img.attr('src', entry);
      $('#overlay').append(img);
    });

});

我为你编辑了一个非常简单的例子：

Working example

在鼠标悬停时显示数组中的所有图像

1 个答案: