Question

我有按动态ID排列的元素（<a>标签中的图像）列表。可以只选择其中一个。假设我选择任何元素。这一次，我更改了它的样式并将“SelectedItem”值设置为其name属性，以便将来查找所选项。我希望，当鼠标悬停在所选项目上时，更改其src值，但jquery函数不起作用，因为我使用javascript设置name =“SelectedItem”属性，在运行时，它在重新加载页面后起作用。当我在代码中设置name =“SelectedItem”时（默认情况下，在运行时之前）它可以工作。但我想在不重新加载页面的情况下这样做。

enter image description here

很快，当我选择操作时，我将name =“SelectedItem”设置为所选图像：

function SelectItem(id) {
var imgId = 'productImage_' + id;
var imgId_element = document.getElementById(imgId.toString());

//my some operations

imgId_element.name = "SelectedItem";
}

取消选择时取名字的值。

function UnSelectItem(id) {
var imgId = 'productImage_' + id;
var imgId_element = document.getElementById(imgId.toString());

//my some operations

imgId_element.name = "";
}

我想将取消选择的图像设置为仅选定图像的背景。当Select/Unselect SelectItem()/UnSelectItem() mouseover()/mouseout()之后$("img[name='SelectedItem']").mouseover(function () { $(this).attr("src", "/Content/images/select.png"); }).mouseout(function () { $(this).attr("src", "/Content/images/unselect.png"); });无法正常工作时，我<img src="@Url.Content("~/Content/images/select.png")" id='productImage_@(Model.Id)' data-id='@Model.Id' @{if (Model.IsSelected) { <text>name="SelectedItem"</text>} } alt="" />。

{{1}}

HTML是：

{{1}}

我该如何解决这个问题？

Answer 1

尝试：

$('body').on('mouseover', 'img[name=SelectedItem]', function() {
  this.src = "/Content/images/select.png";
}).on('mouseout', 'img[name=SelectedItem]', function() {
  this.src = "/Content/images/unselect.png";
});

通过使用.on()的3参数变体，您可以在<body>元素上设置委托处理程序。当鼠标事件冒泡到那个时，处理程序将针对选择器检查目标元素。

现在，说，使用＆＃34;名称＆＃34; <img>元素的属性/属性并没有多大意义;这不是一个有效的属性。您最好添加/删除类值：

function SelectItem(id) {
  $('#productImage' + id).addClass('SelectedItem');
}

然后：

$('body').on('mouseover', '.SelectedItem', function() { ... })

等。最后，您最好使用合成＆＃34; mouseenter＆＃34;和＆＃34; mouseleave＆＃34;事件，因为那些浏览器有些奇怪。

更改元素的属性值后，Jquery函数不起作用

1 个答案: