0

我在 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>
4

5 回答 5

2

您正在使用导致问题的 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');
});
于 2013-10-08T13:29:28.577 回答
1

试试这个代码，它也减少了<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>
于 2013-10-08T13:37:06.923 回答
1

您正在使用重复的id. 这就是为什么只有第一个img变化。

尝试将onmouseoverandonmouseout属性更改为此：

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

然后你的代码应该在外面foreach并且看起来像这样：

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

function offHover() {
      $(this).attr('src', $(this).data('original-src'));
}
于 2013-10-08T13:40:24.560 回答
1

好吧，让它变得简单。在鼠标悬停时，将实际的 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>
于 2013-10-08T14:11:45.947 回答
0

我已经解决了。。

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

我做了什么：

我已将 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>
于 2013-10-08T14:12:20.397 回答