0

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

在此处输入图像描述

不久，当我进行选择操作时，我将 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");
});

HTML是：

<img src="@Url.Content("~/Content/images/select.png")" id='productImage_@(Model.Id)'  data-id='@Model.Id'  @{if (Model.IsSelected) { <text>name="SelectedItem"</text>} }  alt="" />

我怎么解决这个问题？

4

1 回答 1

4

尝试：

$('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";
});

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

现在，也就是说，对<img>元素使用“名称”属性/属性没有多大意义；这不是一个有效的属性。你最好添加/删除一个类值：

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

接着：

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

等等。最后，你最好使用合成的“mouseenter”和“mouseleave”事件，因为它们克服了一些浏览器的奇怪问题。

于 2013-01-19T16:48:34.450 回答