с помощью javascript для изменения динамически созданного элемента управления ASP.NET

Question

Я создал таблицу в своем веб-приложении ASP.NET (C#, VS2010), чьи строки и ячейки должны создаваться динамически (чтение из БД), у меня есть изображение в каждой строке, которая создается динамически (в файле codebehind), как я могу изменить его изображение (отобразить зависание) с помощью мыши? легко использовать небольшую функцию 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, вам может найти все изображения с этим классом для привязки поведения:

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