javascript - 使用 Javascript 选中复选框时如何从 JSON 文件获取数据？

Question

我是 javascript 的初学者，我正在尝试构建一个小的抽认卡游戏，允许用户在单击复选框时选择不同的抽认卡库，但我在实现此功能时遇到了一些困难。我想让我的代码做的是更改当有人点击他们选择的复选框时显示的数据集。

这是复选框和抽认卡的图片:

这是复选框的 HTML 代码:

<div id="flashcard_sets">
    <div id="card_group">
        <h3><u>Choose Flashcard Set</u></h3>
        <input type="checkbox" id="question_words" name="Question Words" value="Question Words" class="vocab">Question Words
        <input type="checkbox" id="verbs" name="Verbs" value="Verbs" class="vocab">Verbs
        <input type="checkbox" id="nouns" name="Nouns" value="Nouns" class="vocab">Nouns
    </div>
</div>

我的数据保存在存储在这个变量中的外部 json 文件中:var jsonUrl = "questionsAndAnswersItalian.json"; 包含以下信息:

{"Question Words":[{"q":"What is the word for 'where' in Italian?","a":"Dove"},
{"q":"What is the word for 'when' in Italian?","a":"Quando"},
{"q":"What is the word for 'why' in Italian?","a":"Perché"}],
"Verbs":[{"q":"What is the verb for 'I am'?","a":"Sono"},
{"q":"What is the verb for 'you are'?","a":"tu sei"},
{"q":"What is the verb for 'he is'?","a":"lui è"}],
"Nouns":[{"q":"gioco","a":"game"},
{"q":"buco","a":"hole"},
{"q":"amico","a":"friend"}]}

这是显示抽认卡的 javascript 函数:

var jsonUrl = "questionsAndAnswersItalian.json";
var cardIndex = 0;
var qs;
var numCards;
var maxIndex;
var isFlipped = 0;

function displayCard() {
    $("#card").fadeOut(400,function(){
        colorIndex = getRandomInteger(0,3);
        $("#card").addClass(colorClasses[colorIndex])
        isFlipped = 0;
        var newHtml = "<h2>Question Words</h2>";
        var chosen_one = $("#card_group input[type=checkbox]:checked")
        if(chosen_one){
            var selection = chosen_one.attr("name");
            newHtml += qs["selection"][cardIndex]["q"];
        }else{
            newHtml += qs["Question Words"][cardIndex]["q"];
        }
        document.getElementById("question").innerHTML = newHtml;
    }).fadeIn(400);
}

这是获取外部 json 数据以显示在抽认卡上的代码:

var jsonUrl = "questionsAndAnswersItalian.json";
var cardIndex = 0;
var qs;
var numCards;
var maxIndex;
var isFlipped = 0;

function init() {
    $.getJSON(jsonUrl, function(jsonObject) {
        qs = jsonObject;
        var chosen_one = $("#card_group input[type=checkbox]:checked")
        if(chosen_one){
            var selection = chosen_one.attr("name");
            numCards = qs["selection"].length;
        }else{
            numCards = qs["Question Words"].length;
        }
        maxIndex = numCards-1;
        displayCard();
    });
}

我知道我肯定做错了什么，我已经尝试了几种解决方案，但现在我真的不知道该怎么做才能让它发挥作用。如果有人可以就此提供一些帮助或建议，我将不胜感激。

谢谢!

链接到无效的完整代码:http://plnkr.co/edit/Uhau56byCGOLJiQxmFFg?p=preview

链接到没有您编写的代码的原始代码，并在 HTML 文件中嵌入了 javascript 函数。你可以看看这个，看看我想用我的代码做什么:http://plnkr.co/edit/kxzTPX3VhYKZGNDkDoWX?p=preview

Answer 1

首先，您想使用单选按钮，因为您只想选择一个按钮。

所以我稍微重写了它以使您走上正确的道路。

function init() {
    $.getJSON(jsonUrl, function(jsonObject) {
        qs = jsonObject;
        changeCard("Question Words");
    });
}

$('.vocab').change(function () {
  var chosen_one = $(this).val();
  changeCard(chosen_one);
});

var changeCard = function(chosen_one) {
  $("#card").fadeOut(400,function(){
      isFlipped = 0;
      var newHtml = qs[chosen_one][cardIndex]["q"];
      maxIndex = qs[chosen_one].length;
      $('#questionTitle').html(chosen_one);
      $('#question').html(newHtml);
      console.log(maxIndex);
  }).fadeIn(400);
};

HTML:

<div id="card">
  <h2 id="questionTitle"></h2>
  <div id="question"></div>
</div>

<div id="flashcard_sets">
<div id="card_group">
    <h3><u>Choose Flashcard Set</u></h3>
    <label for="question_words"><input type="radio" id="question_words" name="vocab" value="Question Words" class="vocab" checked>Question Words</label>
    <label for="verbs"><input type="radio" id="verbs" name="vocab" value="Verbs" class="vocab">Verbs</label>
    <label for="nouns"><input type="radio" id="nouns" name="vocab" value="Nouns" class="vocab">Nouns</label>
</div>

笨蛋:http://plnkr.co/edit/WjDKys?p=preview