0

私は、iPad の使用のために最適化しようとしているサイトに取り組んでいます。iPad の向きを横向きに変更すると、サイトの一部が非表示になり、読みやすくなります。すべてが機能しますが、ポートレートからランドスケープに変更して再び元に戻すと、以前のjquery関数を「キューに入れ」、次々に実行しているようです。

したがって、0 度から 90 度に変更すると、90 度機能が起動します。90 から 180 に変更すると、90 および 180 関数が起動します。180 から -90 に変更すると、90、180、および -90 関数が起動します。

なぜこれを行っているのか、それを止める方法を知っている人はいますか?

-編集- キューに入れられる関数はクリック イベントです。これにより、ボタンをクリックすると、対象の div の高さがアコーディオンのように急速に増減します。

以下のコード:

jQuery(window).bind('orientationchange', function(e) {

          if(Math.abs(window.orientation) == 0){
              $('#slider').animate({height:'375px'});$('#top').animate({height:'445px'});$('#strap').animate({top:'445px'}, false);

              $("a.more-button").click(function(){
                  $('#slider').css({'height':'375px'});$('#top').css({'height':'445px'});$('#strap').css({'top':'445px'});
                  console.log('it fired 0');    
              });
              return false;
          }

          if(Math.abs(window.orientation) == 90){
            $("a.more-button").click(function(){
              $('#slider').animate({height:'0px'}); $('#top').animate({height:'130px'}); $('#strap').animate({top:'130px'}, false);
              console.log('it fired 90');   
            });

          $("#next-page").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          $("#prev-page").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          $(".menu-link").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          return false;
          }

          if(Math.abs(window.orientation) == -90){
              $("a.more-button").click(function(){
                  $('#slider').animate({height:'0px'}); $('#top').animate({height:'130px'}); $('#strap').animate({top:'130px'}, false);
                  console.log('it fired -90');  
              });

          $("#next-page").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          $("#prev-page").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          $(".menu-link").on("click", function(){
              $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false);
          });
          return false;
        }

          if(Math.abs(window.orientation) == 180){
              $('#slider').animate({height:'375px'});$('#top').animate({height:'445px'});$('#strap').animate({top:'445px'}, false);
              $("a.more-button").click(function(){
                  $('#slider').css({'height':'375px'});$('#top').css({'height':'445px'});$('#strap').css({'top':'445px'});
                  console.log('it fired 180');      
              });
              return false;
          }

  }, false);

-編集- 解決策！サイモンのアドバイスに従って、彼のコードと別のユーザー (名前を残していないので信用できない) のコードのハイブリッドで問題を修正しました。

$(window).bind("resize", function(){
    screenOrientation = ($(window).width() > $(window).height())? 90 : 0;

    $("a.more-button, #next-page, #prev-page, .menu-link").off(".MyClickEvents");

    if (screenOrientation === 90) {
        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '0px' }); $('#top').animate({ height: '130px' }); $('#strap').animate({ top: '130px' }, false);
            console.log('it fired 90');
        });

        $("#next-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $("#prev-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $(".menu-link").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
    } else {
      $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        console.log('portrait');
      $("a.more-button").on("click.MyClickEvents", function () {
          $('#slider').css({ 'height': '375px' }); $('#top').css({ 'height': '445px' }); $('#strap').css({ 'top': '445px' });
          console.log('it fired 0');
      });
    }
});
4

1 に答える 1

0

クリックイベントハンドラーをすべてにバインドしてorientationchange、キューに入れます。イベントを名前空間に配置し、この名前空間のすべてのイベントのバインドを解除してから、orientationchangeそれらを再バインドしてください。彼女の簡単な例：

// assume these are the events bound to different some buttons
$('#foo').on('click.myNS', ...);
$('#bar').on('keyup.myNS', ...);
$('#baz').on('dblclick.myNS', ...);    

// magic occurs here...
$('#foo, #bar, #baz').off('.myNS');

// ...and afterwards, the three binds from above are gone

したがって、あなたの場合は次のようになります。

jQuery(window).bind('orientationchange', function (e) {

    // First of all, we need to unbind previous events
    $("a.more-button, #next-page, #prev-page, .menu-link").off(".MyClickEvents");

    if (Math.abs(window.orientation) == 0) {
        $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);

        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').css({ 'height': '375px' }); $('#top').css({ 'height': '445px' }); $('#strap').css({ 'top': '445px' });
            console.log('it fired 0');
        });
        return false;
    }

    if (Math.abs(window.orientation) == 90) {
        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '0px' }); $('#top').animate({ height: '130px' }); $('#strap').animate({ top: '130px' }, false);
            console.log('it fired 90');
        });

        $("#next-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $("#prev-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $(".menu-link").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        return false;
    }

    if (Math.abs(window.orientation) == -90) {
        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '0px' }); $('#top').animate({ height: '130px' }); $('#strap').animate({ top: '130px' }, false);
            console.log('it fired -90');
        });

        $("#next-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $("#prev-page").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        $(".menu-link").on("click.MyClickEvents", function () {
            $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        });
        return false;
    }

    if (Math.abs(window.orientation) == 180) {
        $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false);
        $("a.more-button").on("click.MyClickEvents", function () {
            $('#slider').css({ 'height': '375px' }); $('#top').css({ 'height': '445px' }); $('#strap').css({ 'top': '445px' });
            console.log('it fired 180');
        });
        return false;
    }

}, false);
于 2013-02-04T12:36:39.243 に答える