之前一直在做wpf的项目,最近有个mvc的web项目扔给了我,做的有些郁闷

有些功能做完了心里也没底儿,贴出个代码求大神指点一下

场景:使用cshtml页面循环显示img,点击img时放大img

涉及到到知识点:js,html

调用代码:

if (Model.pic.Contains('|'))
{
foreach (var item in Model.pic.Split('|'))
{
<img id="1" onclick="imgClick(this)" style='width:127px; height :150px; border:1px solid #CCC' src="/FileUp/@item" alt="照片" />
}
}
else
{
<img id="1" onclick="imgClick(this)" style='width:127px; height :150px; border:1px solid #CCC' src="/FileUp/@Model.pic" alt="照片" />
}

js代码:

function imgClick(img) {
if (img.id++ > 7) {
return;
}

// 使用id来存储点击次数
var w = img.id * 127;
var h = img.id * 150;
$(img).css("width", w);
$(img).css("height", h);
}

实现思路:

1,首先使用当前对象做参数,操作起来比较简单

2,本来使用了一个全局变量来记录点击次数,但是会影响到其它图片点击的大小

3,为解决步骤2问题,想到wpf的dp属性,又想到js是弱类型,所以就各种尝试,最后得出如上代码

不知道这种方法会不会存在什么问题,或者有没有什么更好的处理方法