Javascript - 使用foreach和鼠标悬停更改图像

Question

即时通讯工作在mvc项目，并有一个JavaScript更改鼠标悬停的图像。

我的问题是如下：

脚本工作，但只改变图像的第一li元素，然后当我做鼠标移开 it's显示我的最后一个li元素的图像上的位置的第一个李。

我不明白发生了什么。

有人可以给我这只手？

这里是我的代码：

<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> 

Answer 1

您正在使用的ID

这是造成问题的原因

    function onHover() { 
         $(".iconInteraction").attr('src', '/Content/iconhover.png'); 
        } 

        function offHover() { 
         $(".iconInteraction").attr('src', '@p.Icon'); 
          } 

更新： 但那不是答案上面的代码只会让所有的iconInteraction更改。

使用这段代码（把它放在网页的头部。

$('.iconInteraction').hover(function(){ 
      $(this).attr('src', '/Content/iconhover.png'); 
} , function(){ 
      $(this).attr('src', '@p.Icon'); 
}); 

Answer 2

试试这个代码，从而降低了使用复制id中的<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> 

Answer 3

Youare号。这就是为什么只有第一个img更改。

尝试更改onmouseover和onmouseout属性是：

onHover.call(this) 
offHover.call(this) 

那么你的代码应该是foreach外面看起来就像这样：

function onHover() { 
     $(this).attr('src', '/Content/iconhover.png'); 
} 

function offHover() { 
     $(this).attr('src', $(this).data('original-src')); 
} 

Answer 4

好让使简单。在鼠标悬停时，将实际的img-url保存在同一DOM对象（img）的自定义属性（actualUrl）中。在鼠标离开/离开时，将实际的网址恢复为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> 

Answer 5

我已经解决了它..

我必须做不同的一点点，但它的伟大工程。

我做了什么：

我有发生在按钮标签的鼠标悬停及移出的呼叫，并设置了计数器总是创建图像标签的一个新的ID。

我有添加到鼠标悬停和鼠标移开事件"src"

属性，现在它工作正常。

看看我的工作代码：

希望帮助别人。

@{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>