Javascript-使用foreach并在鼠标上方更改图像_Javascript_Jquery_Html_Asp.net_Asp.net Mvc

Javascript-使用foreach并在鼠标上方更改图像

javascript jquery html asp.net asp.net-mvc

Javascript-使用foreach并在鼠标上方更改图像,javascript,jquery,html,asp.net,asp.net-mvc,Javascript,Jquery,Html,Asp.net,Asp.net Mvc,我正在用mvc做一个项目，用javascript在鼠标上修改图像我的问题如下：脚本正在工作，但仅更改第一个li元素的图像，然后在执行mouseout时更改图像它向我展示了第一个李的位置上最后一个李元素的图像我不明白发生了什么事有人能帮我一下吗这是我的代码： <ul> @foreach (var p in ViewBag.MyIcon) { <

我正在用mvc做一个项目，用javascript在鼠标上修改图像

我的问题如下：

脚本正在工作，但仅更改第一个li元素的图像，然后在执行mouseout时更改图像它向我展示了第一个李的位置上最后一个李元素的图像

我不明白发生了什么事

有人能帮我一下吗

这是我的代码：

 <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>


@foreach（ViewBag.MyIcon中的变量p）
{                               

函数onHover（）{
$（“#iconInteraction”）.attr（'src'，'/Content/iconhover.png'）；
}
函数offHover（）{
$（“#iconInteraction”）.attr（'src'，'p.Icon'）；
}

}

您正在使用导致问题的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');
});

您正在使用导致问题的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');
});

尝试此代码，它还可以减少

标记的数量

  <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>


悬停功能（obj）{
$（“obj”）.attr（'src'，'/Content/iconhover.png'）；
}
停悬功能（obj）{
$（“obj”）.attr（'src'，$（obj）.data（'original-src'）；
}

@foreach（ViewBag.MyIcon中的变量p）
{                               


}

尝试此代码，它还可以减少

标记的数量

  <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>


悬停功能（obj）{
$（“obj”）.attr（'src'，'/Content/iconhover.png'）；
}
停悬功能（obj）{
$（“obj”）.attr（'src'，$（obj）.data（'original-src'）；
}

@foreach（ViewBag.MyIcon中的变量p）
{                               


}

您使用的是重复的

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

您正在使用重复的

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

好吧，让我们简单一点。鼠标悬停时，将实际的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>


var onMouseOver=函数（targetImg）{
$（targetImg.attr（'actualUrl'，$（targetImg.prop（'src'））；
$（targetImg.attr（'src'，'/Content/iconhover.png'）；
};
var onMouseOut=函数（targetImg）{
$（targetImg.attr（'src'，$（targetImg.attr（'actual'））；
$（targetImg）.attr（'actualUrl'，null）；//清理数据
};

@foreach（ViewBag.MyIcon中的变量p）
{                               


}

让我们简单一点。鼠标悬停时，将实际的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>


var onMouseOver=函数（targetImg）{
$（targetImg.attr（'actualUrl'，$（targetImg.prop（'src'））；
$（targetImg.attr（'src'，'/Content/iconhover.png'）；
};
var onMouseOut=函数（targetImg）{
$（targetImg.attr（'src'，$（targetImg.attr（'actual'））；
$（targetImg）.attr（'actualUrl'，null）；//清理数据
};

@foreach（ViewBag.MyIcon中的变量p）
{                               


}

我已经解决了它。

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

我所做的：

我已经将mouseover和mouseout的调用放在按钮标记中，并设置了一个计数器来始终创建图像标记的新id

我在mouseover和mouseout事件中添加了一个

“src”

属性，现在工作正常

查看我的工作代码：

 <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>

希望这能帮助别人

@{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>

@{int x=0；}/*******创建变量并使用值0初始化***********/

@foreach（ViewBag.MyIcon中的变量p）
{                               


x=x+1；/*********+1计数器********/
}

我已经解决了它。

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

[jquery]相关文章推荐

随机文章推荐