Javascript 中更多 Razor 中使用的 Razor 变量 [英] Razor variable used within more Razor within Javascript

问题描述

我遍历多个项目并为每个项目设置如下所示的图像标签.每个都有一个 onmouseover 和 onmouseout 事件.db 存储由分号分隔的 mouseover 和 mouseout 图像目录.这部分运行良好.

Im looping through multiple items and setting an image tag like below for each item. Each one has an onmouseover and onmouseout event. The db stores both mouseover and mouseout image directories separated by a semicolon. This part is functioning fine.

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

问题是当我进入我的 javascript 事件

The issue is when i get to my javascript events

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 中的更多 razor 中使用的Id"未被识别.有没有聪明的解决方法?

The 'Id' i am using here within more razor within javascript is not being recognized. Is there a clever work around for this?

推荐答案

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

One way to approach this is by assigning the two urls as data- attributes to each img tag, and then reading those attributes within the hover/unhover functions:

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

这篇关于Javascript 中更多 Razor 中使用的 Razor 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！