javascriptまたはjquery keyboard event

Question

キーボードの左右のボタン（37と39）をクリックして、次のボタンと前のボタンを制御したいと考えています。

私はそれを行うためにjavascriptコードを書こうとしましたが、それは第1および第2のタブに対してのみ機能しました。

ここでは、あなたのハンドラを置かないCSS

<?php 

     $nexticon = '<span style="font-size: 28px;"><i class="fi-arrow-right"></i></span>'; 
     $previousicon = '<span style="font-size: 28px;"><i class="fi-arrow-left"></i></span>'; 

    ?> 


<div style="position: absolute; z-index: 7;"> 


    <!-- multistep form --> 
<form id="msform" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" autocomplete="off"> 


<!-- fieldsets --> 
<fieldset> 


bla bla bla page 1 


    <button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button> 


    </fieldset> 

<fieldset> 







    <form name="change"> 


bla bla bla page 2 

    <button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button> 
    <button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></button> 
</fieldset> 


<fieldset> 


    bla bla bla page 3 


    <button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button> 
    <button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button> 
</fieldset> 


<fieldset> 


    bla bla bla page 4 


    <button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button> 
    <button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button> 
</fieldset> 

<fieldset> 


    bla bla bla page 5 

    <button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button> 
    <button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button> 
</fieldset> 

<fieldset> 


    bla bla bla page 6 

    <button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button> 
    <button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button> 
</fieldset> 

<fieldset> 


    bla bla bla page 7 


    <button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button> 

</fieldset> 
    <!-- progressbar --> 
<ul id="progressbar"> 
<li class="active">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
<li>6</li> 
<li>7</li> 
</ul> 
    </form> 







<!-- jQuery easing plugin -->  
     <script src="js/jquery.easing.min.js" type="text/javascript"></script> 
     <script> 
     $(function() { 

     //jQuery time 
     var current_fs, next_fs, previous_fs; //fieldsets 
     var left, opacity, scale; //fieldset properties which we will animate 
     var animating; //flag to prevent quick multi-click glitches 

     $(".next").click(function(){ 
       if(animating) return false; 
       animating = true; 

       current_fs = $(this).parent(); 
       next_fs = $(this).parent().next(); 

       //activate next step on progressbar using the index of next_fs 
       $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 

       //show the next fieldset 
       next_fs.show(); 
       //hide the current fieldset with style 
       current_fs.animate({opacity: 0}, { 
         step: function(now, mx) { 
           //as the opacity of current_fs reduces to 0 - stored in "now" 
           //1. scale current_fs down to 80% 
           scale = 1 - (1 - now) * 0.2; 
           //2. bring next_fs from the right(50%) 
           left = (now * 50)+"%"; 
           //3. increase opacity of next_fs to 1 as it moves in 
           opacity = 1 - now; 
           current_fs.css({'transform': 'scale('+scale+')'}); 
           next_fs.css({'left': left, 'opacity': opacity}); 
         }, 
         duration: 800, 
         complete: function(){ 
           current_fs.hide(); 
           animating = false; 
         }, 
         //this comes from the custom easing plugin 
         easing: 'easeInOutBack' 
       }); 
     }); 

     $(".previous").click(function(){ 
       if(animating) return false; 
       animating = true; 

       current_fs = $(this).parent(); 
       previous_fs = $(this).parent().prev(); 

       //de-activate current step on progressbar 
       $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); 

       //show the previous fieldset 
       previous_fs.show(); 
       //hide the current fieldset with style 
       current_fs.animate({opacity: 0}, { 
         step: function(now, mx) { 
           //as the opacity of current_fs reduces to 0 - stored in "now" 
           //1. scale previous_fs from 80% to 100% 
           scale = 0.8 + (1 - now) * 0.2; 
           //2. take current_fs to the right(50%) - from 0% 
           left = ((1-now) * 50)+"%"; 
           //3. increase opacity of previous_fs to 1 as it moves in 
           opacity = 1 - now; 
           current_fs.css({'left': left}); 
           previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); 
         }, 
         duration: 800, 
         complete: function(){ 
           current_fs.hide(); 
           animating = false; 
         }, 
         //this comes from the custom easing plugin 
         easing: 'easeInOutBack' 
       }); 
     }); 



     }); 
     </script> 

Answer 1

なしの完全なコードはありますか？私はあなたの予想されるアプローチを推測することはできません。

これは私が行うことです：
個々のインスタンスとのバインディングは、ユーザーがこれらのフィールドセットコンテナに焦点を当てる可能性があるため、ドキュメントでグローバルイベントハンドラを登録します。現在表示されているフィールドセットとその子ナビゲーションボタンの表示をチェックすることにより、アニメーションを表示する対応するアクションを実行することができます。

$(function() { 
    $('#ctnFieldSets div').each(function(index) { 
    var fs = $(this); 

    // hide buttons 
    if (!fs.prev('div').length) fs.find('button.prev').hide(); 
    if (!fs.next('div').length) fs.find('button.next').hide(); 

    // hide pages 
    if (index > 0) fs.hide(); 
    }); 

    // register handlers for buttons 
    $('#ctnFieldSets div button.prev, #ctnFieldSets div button.next').bind({ 
    click: function(e) { 
     var btn = $(this); 
     var fs = $(btn.parent('div')[0]); 

     fs.hide(); 
     if (btn.is('.prev')) { 
     // animation here // 
     $(fs.prev('div')[0]).show(); 
     return; 
     } 

     if (btn.is('.next')) { 
     // animation here // 
     $(fs.next('div')[0]).show(); 
     return; 
     } 
    } 
    }); 

    // register global event handler for keydown. you may bind to other objects if 
    // you don't want to be global event handler 

    $(document).bind({ 
    keydown: function(e) { 
     // you should check targets here. skips when target could input text 
     if ($(e.target).is('input,textarea')) return; 

     var fs = null; 

     switch(e.keyCode) { 
     case 37: 
      fs = $($('#ctnFieldSets div:visible').first()[0]); 
      if (!fs.find('button.prev:visible').length) return; 

      // animation here // 
      fs.hide(); 
      $(fs.prev('div')[0]).show(); 
      break; 

     case 39: 
      fs = $($('#ctnFieldSets div:visible').first()[0]); 
      if (!fs.find('button.next:visible').length) return; 

      // animation here // 
      fs.hide(); 
      $(fs.next('div')[0]).show(); 
      break; 

     default: 
      return; 
     } 
    } 
    }); 
}); 


<div id="ctnFieldSets"> 
    <div><button class='prev'>Prev</button>Div1<input><button class='next'>Next</button></div> 
    <div><button class='prev'>Prev</button>Div2<input><button class='next'>Next</button></div> 
    <div><button class='prev'>Prev</button>Div3<input><button class='next'>Next</button></div> 
</div>