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');
});

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）中。在鼠标离开/退出时将实际URL恢复为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的调用放在按钮标记中，并设置了一个计数器以始终创建图像标记的新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>

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

5 个答案: