更改元素的屬性值後，jquery函數不工作

我有元素（<a>標籤中的圖像）列表，它是按動態ID排列的。可以只選擇其中的一個。假設我選擇了任何元素。這一次，我改變了它的風格，並將「SelectedItem」值設置爲其名稱屬性以便將來查找所選項目。我想，當鼠標懸停在選定的項目，改變其src值，但jquery功能不起作用，因爲我設置name =「SelectedItem」屬性與JavaScript，在運行時，它重新加載頁面後工作。當我在代碼中設置name =「SelectedItem」時（默認情況下，運行時），它工作。但我想在不重新加載頁面的情況下執行此操作。更改元素的屬性值後，jquery函數不工作

enter image description here

不久，當我做選擇操作，我設置的名字= 「的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='[email protected](Model.Id)' data-id='@Model.Id' @{if (Model.IsSelected) { <text>name="SelectedItem"</text>} } alt="" />

我怎樣才能解決這個問題？

來源

2013-01-19 Jhoon Bey

將jQuery與純DOM操作混合在一起會讓人感到困惑。如果你打算使用jQuery，你可能會全押。 – Pointy

'imgId'是一個字符串，你不需要'.toString（）' – Bergi

嘗試：

$('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>元件上的委派處理程序。當鼠標事件冒泡時，處理程序會根據選擇器檢查目標元素。

現在，這就是說，使用<img>元素的「名稱」屬性/屬性沒有多大意義;這不是一個有效的屬性。你會好起來的添加/刪除類值：

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

然後：

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

等。最後，你會更好使用合成「的mouseenter」和「 mouseleave「事件，因爲這些事件會克服一些瀏覽器的怪異。

來源

2013-01-19 16:48:34 Pointy

真的很棒的例子，它幫助我很多 – Ata

更改元素的屬性值後，jquery函數不工作

回答

相關問題