цикл через возвращенный JSON с кодом клавиатуры

Question

Я новичок в jQuery. Я хочу отображать содержимое флеш-карты, когда страница выполняет первую загрузку, а пользователи нажимают пробел, чтобы показать ответ. После того, как пользователи будут выбирать правильные или неправильные, часть ответа исчезнет. Я застрял в отображении и скрытии ответа, также увеличивая индекс для цикла.

Вот что я сделал до сих пор. Я очень ценю любую помощь!

$(document).ready(function() { 

    var list = new Array(); 
    //get JSON from server 
$.get("classes/getJSON.php", function(data) 
    { 
     var parsedData = $.parseJSON(data); 
     list = parsedData; 
     return list; 


    });// end get 

    // loop through the array and display content 

    var index = 0; 
    window.on("keypress", function(event){ 


     var keycode = (event.keyCode ? event.keyCode : event.which); 

     // press Spacebar to show answer 

     if(keycode == "32") 
     { 
      $(".cards_back").show(); 
     } 

     //press arrow key to choose right or wrong 
     else if (keycode == "37") 
     { 

      index +=1 ; 
      var div_idword = "<span>" + list[index] + "</span>"; 
      $(". audio").html(div_idword); 
      var $idword = list[index].idword; 
      var $box_num = parseInt(cards[index].box_num) + 1; 
      $(".cards_back").hide(); 

     } 
     else if (keycode == "39") 
     { 
      index +=1 ; 
      var div_idword = "<span>" + cards[index].audio + "</span>"; 
      $(". audio").html(div_idword); 
      var $idword = cards[index].idword; 
      var $box_num = parseInt(cards[index].box_num) - 1; 
      if($box_num < 0){ 
       $box_num = 0; 
      } 

      $(".cards_back").hide(); 
     } 



     $.ajax(
      { 
       url : "classes/update_box_num.php", 
       type : "POST", 
       data : {'idword':$idword, 'box_num':$box_num}, 
       success : function(data, textStatus, jqXHR){ 
        alert("changed"); 
       } 
      } 
     );// end ajax 
    });// end onclick 



}); // end ready 

Answer 1

Вот код для обработки стрел и spacebars:

http://jsfiddle.net/5A9nK/3/

$(document).keyup(function(e){ 
    switch(e.which) { 

См: Binding arrow keys in JS/jQuery

Для приращения карты, которые вы могли бы:

var cardsArray = [get from JSON]; 
var currentCardIndex = 0; 

function getCurrentCard() { 
    return cardsArray[currentCardIndex]; 
} 

function nextCard() { 
    currentCardIndex++; 
    if (currentCardIndex >= cardsArray.length) { 
     currentCardIndex = cardsArray.length - 1; 
    } 
} 

Я мало знаю об объектно-ориентированном javascript, так что это просто использует глобальные переменные и функции. Вы можете заставить его сделать что-то, когда оно пройдет мимо последней карты.