0

私はmvcのプロジェクトに取り組んでおり、マウスオーバーで画像を変更するJavaScriptを持っています。

私の問題は次のとおりです。

スクリプトは機能していますが、最初のli要素の画像のみを変更し、マウスアウトすると、最初のliの場所に最後のli要素の画像が表示されます。

何が起こっているのか理解できません。

誰かが私にこのplsで手を差し伸べることができますか??

ここに私のコードがあります:

 <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

簡単にしましょう。マウス ホバーで、実際の 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 に答える
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 に答える