javascript - Razor 变量在 Javascript 中的更多 Razor 中使用

Question

我循环遍历多个项目并为每个项目设置如下所示的图像标签。每个事件都有一个 onmouseover 和 onmouseout 事件。数据库存储鼠标悬停和鼠标悬停图像目录，以分号分隔。这部分运行良好。

<img onmouseover="hover(this, @id);" onmouseout="unhover(this, @id);" src="@(tblIconTable.getSpecificIconFromId(id).icon.Split(';')[0])" />

问题是当我到达我的 javascript 事件时

function hover(element, Id) {
    element.setAttribute('src', '@(tblIconTable.getSpecificIconFromId(Id).icon.Split(';')[1])');
}
function unhover(element, Id) {
    element.setAttribute('src', '@(tblIconTable.getSpecificIconFromId(Id).icon.Split(';')[0])');
}

我在 JavaScript 中的 more razor 中使用的“Id”未被识别。有什么巧妙的解决办法吗？

Answer 1

解决此问题的一种方法是将两个 url 作为 data- 属性分配给每个 img 标签，然后在悬停/取消悬停函数中读取这些属性:

<img onmouseover='hover(this)' onmouseout='unhover(this)' data-img-hover='@(tblIconTable.getSpecificIconFromId(Id).icon.Split(';')[1])' data-img-unhover='@(tblIconTable.getSpecificIconFromId(Id).icon.Split(';')[0])' src='@(tblIconTable.getSpecificIconFromId(Id).icon.Split(';')[0])'>

function hover(element) {
    element.setAttribute('src', element.data('img-hover'));
}
function unhover(element) {
    element.setAttribute('src', element.data('img-unhover'));
}