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将变为“”，因此图像消失。

我找不到原因，所以希望可以在这里一些帮助......

非常感谢您

Answer 1

因为你使用相同的变量对所有<img>元素这可能发生。与其在所有这些变量之间共享一个变量，您应该以特定元素上的键来存储oldsrc。

要做到这一点的一种方法是通过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]; 
     } 
    );