[英]Javascript - using foreach and change image on mouseover
im working on a project in mvc and have a javascript to change the image on mouseover. 我在mvc中的一个项目上工作,并有一个JavaScript可以在鼠标悬停时更改图像。
my problem is the follows: 我的问题如下:
the script is working but only change the image for the first li element and then when i do mouseout it´s showing me the image of the last li element on the place of the first li. 该脚本正在运行,但只更改了第一个li元素的图像,然后当我将其移出鼠标时,它向我显示了第一个li元素上最后一个li元素的图像。
i can´t understand what happening . 我不知道发生了什么。
someone can give me a hand with this pls?? 有人可以帮我这个忙吗?
here is my code: 这是我的代码:
<ul>
@foreach (var p in ViewBag.MyIcon)
{
<li>
<script type='text/javascript'>
function onHover() {
$("#iconInteraction").attr('src', '/Content/iconhover.png');
}
function offHover() {
$("#iconInteraction").attr('src', '@p.Icon');
}
</script>
<form action="" method="post">
<button type="submit" name="submit" id="Interface_Button">
<img src="@p.Icon" onmouseover="onHover();" onmouseout="offHover();" id="iconInteraction"/>
</button>
</form>
</li>
}
</ul>
you are using id's which are causing the problem 您正在使用导致问题的ID
function onHover() {
$(".iconInteraction").attr('src', '/Content/iconhover.png');
}
function offHover() {
$(".iconInteraction").attr('src', '@p.Icon');
}
update : but thats not the answer the code above will just make all the iconInteraction change . 更新:但这不是答案,上面的代码只会使所有iconInteraction发生更改。
use this bit of code (put it in the head of the page. 使用这段代码(将其放在页面的开头。
$('.iconInteraction').hover(function(){
$(this).attr('src', '/Content/iconhover.png');
} , function(){
$(this).attr('src', '@p.Icon');
});
Try this code which reduces the number of <script>
tags also 试试这个代码,它也减少了
<script>
标签的数量
<script type='text/javascript'>
function onHover(obj) {
$("obj").attr('src', '/Content/iconhover.png');
}
function offHover(obj) {
$("obj").attr('src', $(obj).data('original-src'));
}
</script>
<ul>
@foreach (var p in ViewBag.MyIcon)
{
<li>
<form action="" method="post">
<button type="submit" name="submit" id="Interface_Button">
<img src="@p.Icon" data-original-src="@p.Icon"
onmouseover="onHover(this);"
onmouseout="offHover(this);" id="iconInteraction"/>
</button>
</form>
</li>
}
</ul>
Youare using a duplicated id
. 您正在使用重复的
id
。 This is why only the first img
change. 这就是为什么只有第一个
img
更改的原因。
Try changing the onmouseover
and onmouseout
attribute to this : 尝试将
onmouseover
和onmouseout
属性更改为此:
onHover.call(this)
offHover.call(this)
Then your code should be outside the foreach
and look like this : 然后,您的代码应在
foreach
之外,如下所示:
function onHover() {
$(this).attr('src', '/Content/iconhover.png');
}
function offHover() {
$(this).attr('src', $(this).data('original-src'));
}
Well lets make it simple. 好吧,让它变得简单。 On mouse hover save the actual img-url in a custom property (actualUrl) of the same DOM object (img).
鼠标悬停时,将实际img-url保存在同一DOM对象(img)的自定义属性(actualUrl)中。 On mouse leave/out restore the actual url as src.
鼠标离开/退出时,将实际网址恢复为src。
<script type='text/javascript'>
var onMouseOver = function(targetImg) {
$(targetImg).attr('actualUrl', $(targetImg).prop('src'));
$(targetImg).attr('src', '/Content/iconhover.png');
};
var onMouseOut = function(targetImg) {
$(targetImg).attr('src', $(targetImg).attr('actualUrl'));
$(targetImg).attr('actualUrl', null); // Cleaning data
};
</script>
<ul>
@foreach (var p in ViewBag.MyIcon)
{
<li>
<form action="" method="post">
<button type="submit" name="submit" id="Interface_Button">
<img src="@p.Icon" onmouseover="onMouseOver(this);"
onmouseout="onMouseOut(this);"/>
</button>
</form>
</li>
}
</ul>
i have solved it.. 我已经解决了..
i have do it a little bit different but it works great. 我做的有点不同,但是效果很好。
What i have done: 我做了什么:
i have place the call of the mouseover and mouseout in the button tag and have set a counter to create always a new id of the image tag. 我已将mouseover和mouseout的调用放置在button标签中,并设置了一个计数器以始终创建图像标签的新ID。
i have add to the mouseover and mouseout event a "src"
我已经在mouseover和mouseout事件中添加了
"src"
attribute and now its working fine. 属性,现在工作正常。
take a look to my working code: 看一下我的工作代码:
hope that helps somebody else. 希望对别人有帮助。
@{int x=0;} /**********Create variable and initalize with the value 0***********/
<ul>
@foreach (var p in ViewBag.MyIcon)
{
<li>
<form action="" method="post">
<button type="submit" name="submit" onmouseover="document.getElementById('@("icon" + x.ToString())').src='/Content/hovericon.png';"
onmouseout="document.getElementById('@("icon" + x.ToString())').src='@p.Icon';" >
<img src="@p.Icon" id="@("icon" + x.ToString())"/>
</button>
</form>
</li>
x = x + 1; /********+1 counter********/
}
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.