Question

我首先在服务器上运行ajax请求以接收我的图像数据然后我执行以下操作将从服务器收到的所有图像添加到网站：

var image="";
  for (var i = receivedData.length - 1; i >= 0; i--) { //received data is the stuff coming from server
    image+="<a href='letterView.php?id=".concat(receivedData[i].ID);
    image+="''><img class='individualImages'";
    image+="id=letterImage_'".concat(i);
    image+="' src=images/244x200/";
    image+=receivedData[i].ID;
    image+=".png alt='image' ></a>";

  }
  $('.letters').html(image);

我以为我现在可以使用ID为图像添加悬停效果（在悬停时更改图像），但我无法弄清楚如何去做。有人可以帮忙吗？提前谢谢！

Answer 1

这是你可以做的：http://jsfiddle.net/nqS6L/1/ 这可以在for loop内完成。您可以使用class或ID并循环播放。

我在悬停时添加了新的div0来显示/隐藏，仅作为示例。您可以在悬停时以show/hide的任意方式执行逻辑操作。我还向receivedData添加了一些数据，以便示例工作，使其更加清晰。 receivedData = [ {"ID": "product1"}, {"ID": "product2"}, {"ID": "product3"}];

$(".individualImages").hover(function() {
    $("#div0").show(); 
}, function() {
    $("#div0").hide(); 
});

在将图像附加到DOM后添加了逻辑。这条线后面的意思 $('.letters').html(image);您可以再次添加for循环并使用ID进行悬停，从而根据图片的id显示/隐藏不同的内容。

添加悬停在通过.html（javascript）添加的图像

1 个答案: