0

私が得たこの問題は説明するのが少し難しいですが、単純化してできるだけ簡単にします。

ステートメント:
次の図で明らかなように、クリックに敏感な 9 つの div があり、それらのいずれかをクリックすると、下の 2 番目の図でも明らかな別の画面が表示されます。div 画像


問題: 最初の DIV で、クリックしてメイン メニューに戻ると、すべて正常に動作しますが、2 番目の Div をクリックしてメイン メニューに戻ると、ボタンが機能しません。両方に同じ backtoMain() メソッドを使用しましたが、明らかに何かが間違っています。

2番目の画像

backToMainMenu ボタンを機能させるために使用する JavaScript コード:

            function hideAllDivs () { /* the function that hides all divs */

              jQuery('#thirdVision').hide();
              jQuery('#forthVision').hide();
              jQuery('#fifthVision').hide();
              jQuery('#sixthVision').hide();
              jQuery('#seventhVision').hide();
              jQuery('#eightthVision').hide();
              jQuery('#ninethVision').hide();
              jQuery('#tenthVision').hide();
              jQuery('#eleventhVision').hide();
              //jQuery('#secondVision').show();
            }
            function returnToMenu () { /* the function that shows main screen which is secondVision */
              hideAllDivs();
              jQuery('#secondVision').show(1400); /* shows secondVision "First Picture" in 1 and a half second */
            }
            jQuery('#backToMain').click(function(e){ /* the function responsible for when "backtoMainMenu" button is clicked */
                returnToMenu();
                e.preventDefault();
            });


私は約3日間それに取り組んできましたが、それを解決する方法がわかりませんでした。

4

2 に答える 2

1

@Nima 複数の戻るボタンに同じ ID を使用しました。代わりに、ID の場合はクラスを使用します

HTMLリンクは

<a href="#" class="button big green backToMain"><span> Back To </span>Main Menu</a>

スクリプトコードは

jQuery('.backToMain').click(function(e){ 
       returnToMenu();
       e.preventDefault();
});

これが役立つことを願っています!!

于 2013-01-01T16:27:47.047 に答える
0

次のような ID の代わりにクラスを使用します。

jsbin デモ

index()クリックされた要素の を取得して、メソッドを使用して関連するコンテンツを取得し.eq()ます

HTML: サンプル

<div id="container">

  <div class="box">Title 1</div>
  <div class="box">Title 2</div>
  <div class="box">Title 3</div>
  ...

  <div class="content">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
  ...

  <button id="backToMain">BACK TO MAIN</button>

</div>

jQ:

(function( $ ){

  $('.box').click(function(){        
    var myIndex = $(this).index();
    $('.content').eq( myIndex ).show();
    $('#backToMain').show();
  });

  $('#backToMain').click(function(e){ 
      $(this).hide();
      $('.content').hide();
  });

})(jQuery);
于 2013-01-01T16:30:50.443 に答える