jqueryの画像を変更するにはホバーsrcを表示空の画像

Question

私は自分のウェブサイトのメニューボタンとして画像を持っている、私はユーザーがそれをホバーするか、ページを開くときにイメージを別のものに変更したい。

だから、私は私の_Layout.cshtmlにホバー機能を設定します。

<div id="menubutton"> 
     <a href="@Url.Action("Index", "Home")" id="bg1"> 
      <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/homebutton.png")" alt="home" id="homebutton" /> 
     </a><a href="@Url.Action("Index", "Kitchen")" id="bg2"> 
      <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/kitchenbutton.png")" alt="kitchen" id="kitchenbutton" /> 
     </a><a href="@Url.Action("Index", "Stock")" id="bg3" > 
      <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/stockbutton.png")" alt="stock" id="stockbutton" /></a> 
     <a href="@Url.Action("Index", "Shop")" id="bg4" > 
      <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/shopbutton.png")" alt="shoppinglist" id="shopbutton" /></a> 
     <a href="@Url.Action("Index", "Recipe", new { id = 0 })" id="bg5" > 
      <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/recipebutton.png")" alt="recipe" id="recipebutton" /></a> 
     <a href="@Url.Action("Index", "Report")" id="bg6" > 
      <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/reportbutton.png")" alt="report" id="reportbutton" /></a> 
     <a href="@Url.Action("Index", "Notification")" id="bg7" > 
      <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/notificationbutton.png")" alt="notification" id="notificationbutton" /></a> 
     <a href="@Url.Action("Index", "Information", new { id = 0})" id="bg8" > 
      <img src="@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/infobutton.png")" alt="info" id="infobutton" /></a> 
    </div> 

    // Store the old src of the image before hover to reapply after hover 
    var oldsrc = ""; 
    $('#menubutton img').hover(
     function() { 
      var name = $(this).attr('id') + '_o'; 
      oldsrc = $(this).attr('src'); 
      var newsrc = '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString())' + '/Content/New_Layout/' + name + '.png'; 
      $(this).attr('src', newsrc); 
     }, 
     function() { 
      var name = $(this).attr('id'); 
      //var newsrc = '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString())' + '/Content/New_Layout/' + name + '.png'; 
      $(this).attr('src', oldsrc); 
     } 
    ); 

（注：私は、デプロイ後に正しい画像のパスを取得するためのAppSettingsを使用しています）

そして、すべてのページで、現在のところ、それは作品は罰金だ

$('#bg4 img').attr('src', '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString() + "/Content/New_Layout/shopbutton_o.png")'); 

：私は、現在のページのユーザーを強調するよう画像を設定するワン。しかし、イメージホバーが数回トリガーされると、イメージsrcは ""になり、イメージは消えます。

私は原因を見つけることができなかったので、希望はここにいくつかの助けを得ることができます...

は非常にあなたがすべての <img>の要素に同じ変数を使用しているので、これが起こっされる可能性があります

Answer 1

ありがとうございます。それらの間で1つの変数を共有するのではなく、oldsrcを特定の要素のキーと同じ方法で格納する必要があります。

これを行う方法の1つは、the jQuery .data methodです。

コード：

$('#menubutton img').hover(
    function() { 
     var oldsrc = $(this).attr('src'); 
     $(this).data('oldsrc', oldsrc); // Attach data to element 

     var name = $(this).attr('id') + '_o'; 
     var newsrc = '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString())' 
      + '/Content/New_Layout/' + name + '.png'; 
     $(this).attr('src', newsrc); 
    }, 
    function() { 
     var oldsrc = $(this).data('oldsrc'); // Extract data from element 
     $(this).attr('src', oldsrc); 
    } 
); 

Answer 2

限り私はウルの問題を理解して、あなたはこれを試してください。

// Store the old src of the image before hover to reapply after hover 
    var oldsrc = {}; 
    $('#menubutton img').hover(
     function() { 
      var name = $(this).attr('id') + '_o'; 
      oldsrc[name] = $(this).attr('src'); 
      var newsrc = '@(System.Configuration.ConfigurationManager.AppSettings["WebDirectory"].ToString())' + '/Content/New_Layout/' + name + '.png'; 
      $(this).attr('src', newsrc); 
     }, 
     function() { 
      var name = $(this).attr('id'); 
      $(this).attr('src', oldsrc[name]); 
      delete oldsrc[name]; 
     } 
    );