Question

我想使用名为#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，图像反映按钮将采取的动作（显示或隐藏）。

任何帮助都会非常感激，我对此很新，并且无法理解为什么它在最新版本中不起作用，但在之前的版本中不起作用。

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

更改图像来源

1 个答案: