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

Question

我在我的 ASP.NET(C#，VS2010)Web 应用程序中创建了一个表，其行和单元格应该动态创建(从数据库读取)，我在每行中有一个动态创建的图像(在代码隐藏中)文件)，如何通过鼠标悬停来更改其图像(显示悬停)？对于静态创建的控件使用一个小的 JavaScript 函数很容易，但是对于动态创建的控件如何做到这一点呢？我可以使用内联 JS 函数吗？我应该如何实现它？

谢谢

Answer 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中，你可以找到所有具有该类的图像来绑定(bind)行为:

$("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/