1

我想使用一个称为#MapButtonImage“按钮”的图像，所以当有人点击它时，会显示一个 div 和#MapButtonImage更改的来源。我已经做到了，它显示 div 如下：

$(window).load(function(){
  $("img#MapButtonImage").click(function(){
  $("div.MapMain").toggleClass('MapMainShow');
  });
});

当我现在单击按钮时，它会将地图 div 的类更改为 display:block，然后第二次单击又回到默认的 display:none。

但我似乎无法让它使用 jQuery 更改图像的来源。我按照指南使用了两个函数的切换，并将源作为我想要的两个图像，但它仅适用于早期版本的 jQuery，而不适用于最新版本。

图片#MapButtonImage 具有原始来源“ShowMapButton.jpg”，我想在单击它时将其更改为“HideMapButton.jpg”，然后在再次单击时将其更改为“ShowMapButton.jpg”。

目的是让它作为一个切换来显示它下面的 Map div，并且图像反映了按钮随后将采取的操作（显示或隐藏）。

任何帮助将不胜感激，我对此很陌生，无法理解为什么它在最新版本中不起作用但在以前的版本中起作用。

4

1 回答 1

1

试试这个：

$(window).load(function(){
  $("img#MapButtonImage").click(function(){
  $("div.MapMain").toggleClass('MapMainShow');

  if($("div.MapMain").hasClass('MapMainShow')) {
      $(this).attr('src', 'HideMapButton.jpg');
  } else {
      $(this).attr('src', 'ShowMapButton.jpg');
  }
  });
});
于 2013-03-01T15:31:43.197 回答