按钮返回主屏幕不起作用

时间:2013-01-01 16:10:34

标签: javascript jquery

我遇到的这个问题有点难以解释,但我简化并尽可能简单。

声明:
如下图所示,有9个div对点击很敏感,当你点击其中任何一个时,会出现另一个屏幕,这在第二张图片中也很明显。 divs image


问题:  在第一个DIV中,当我点击返回主菜单时,一切正常,但是当我点击Second Div并点击返回主菜单时,该按钮不起作用。我对两者使用了相同的backtoMain()方法,但显然有些不对劲。

second image

我用来使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天,但无法弄清楚如何解决它。

2 个答案:

答案 0 :(得分:1)

@Nima你为多个后退按钮使用相同的id,而不是在ID

的情况下使用class

html链接应为

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

,脚本代码应为

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

希望这会有所帮助!!

答案 1 :(得分:0)

使用类而不是ID,如:

jsbin demo

使用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);