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

以下是处理箭头和空格键的一些代码：

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知之甚少，所以这只是使用全局变量和函数。当它超过最后一张牌时，你可以让它做点什么。

循环返回带有键码的JSON

1 个答案: