使用 javascript 更改动态创建的 ASP.NET 图像控件答案

【问题标题】：using javascript for changing dynamically created ASP.NET image control使用 javascript 更改动态创建的 ASP.NET 图像控件
【发布时间】：2012-01-06 20:35:40
【问题描述】：

我在我的 ASP.NET（C#，VS2010）Web 应用程序中创建了一个表，其行和单元格应该动态创建（从 DB 读取），我在每一行中都有一个动态创建的图像（在代码隐藏中文件），如何在鼠标悬停时更改其图像（显示悬停）？对静态创建的控件使用一个小的 JavaScript 函数很容易，但是如何为动态创建的控件完成呢？我可以使用内联 JS 函数吗？我应该如何实现它？

谢谢

【问题讨论】：

使用 CSS。不要滥用 JavaScript
我怎样才能用 CSS 做到这一点？你能给我小费吗？
img:hover { background-image: 'other.png' }

标签： javascript asp.net

【解决方案1】：

给你动态创建的图像一个类，使用它们的CssClass 属性：

// Dynamically create the image control in code behind
Image image = new Image();
Image.CssClass = "change-on-hover";
Image.ImageUrl = "image.jpg"; // Of course, this is dynamic from the database

// Save the alternative image URL in a data-attribute
Image.Attributes["data-alternate-image"] = "image-over.jpg";

parent.Controls.Add(image);

这将像这样渲染每个图像：

<img src="image.jpg" class="change-on-hover" 
  data-alternative-image="image-over.jpg" />

然后在jQuery中，你可以找到所有带有这个类的图片来绑定行为：

$("img.change-on-hover")
  .on("mouseover", function(e) {
    // Save original src (image.jpg)
    $(this).data("original-image") = this.src;

    // Change src to alternative (image-over.jpg)
    this.src = $(this).data("data-alternate-image");
  })
  .on("mouseout", function(e) {
    // Change src back to original
    this.src = $(this).data("original-image");
  });

data-alternative-image 属性是一种很好的方式，可以将一些信息从后面的代码存储在图像标签中，然后您可以稍后在 JavaScript 事件处理程序中读取这些信息。您可以按照自己喜欢的方式制作自己的数据属性。

有关数据属性的更多信息：http://ejohn.org/blog/html-5-data-attributes/

【讨论】：