1

#MapButtonImage「ボタン」と呼ばれる画像を使用したいので、誰かがそれをクリックすると、div が表示され、#MapButtonImage変更のソースが表示されます。次のようにdivを表示するようにしました。

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

現時点でボタンをクリックすると、マップ div のクラスが display:block に変更され、2 回目のクリックでデフォルトの display:none に戻ります。

しかし、jQueryを使用して画像のソースを変更することはできないようです。ソースを必要な2つの画像として2つの関数のトグルを使用してガイドに従いましたが、それはjQueryの以前のバージョンでのみ機能し、最新のものでは機能しません。

画像 #MapButtonImage には元のソース「ShowMapButton.jpg」があり、クリックすると「HideMapButton.jpg」に変更し、もう一度クリックすると「ShowMapButton.jpg」に戻り​​ます。

目的は、その下にマップ 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 に答える