Javascript-使用foreach並在鼠標懸停時更改圖像

Question

我在mvc中的一個項目上工作，並有一個JavaScript可以在鼠標懸停時更改圖像。

我的問題如下：

該腳本正在運行，但只更改了第一個li元素的圖像，然后當我將其移出鼠標時，它向我顯示了第一個li元素上最后一個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

試試這個代碼，它也減少了<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

您正在使用重復的id 。 這就是為什么只有第一個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

我已經解決了..

我做的有點不同，但是效果很好。

我做了什么：

我已將mouseover和mouseout的調用放置在button標簽中，並設置了一個計數器以始終創建圖像標簽的新ID。

我已經在mouseover和mouseout事件中添加了"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>