Javascript - 使用 foreach 并在鼠标悬停时更改图像

Question

我正在使用 mvc 开发一个项目，并且有一个 javascript 可以在鼠标悬停时更改图像。

我的问题如下:

脚本正在工作，但仅更改第一个 li 元素的图像，然后当我执行 mouseout 时 它向我显示了第一个 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');
});