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>