使用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

鏈接到原始代碼，而無需編寫代碼，並且將javascript函數嵌入HTML文件中。 您可以看一下它，看看我想對我的代碼做什么： 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

Answer 2

    if(document.getElementsByTagName("input").checked){

這條線肯定會是一個問題。 document.getElementsByTagName返回一個元素數組，並且由於該數組沒有checked屬性，因此該語句的值為未定義。 由於undefined具有錯誤的真實值，因此if語句中的任何內容都不會執行。

現在，這並不意味着您不能自己在input元素的數組中搜索以找到復選框。 您將需要做一個for循環來自己檢查復選框：

var chosen_one;
for (var i=0; i < document.getElementsByTagName("input").length; i++){
    var box = document.getElementsByTagName("input")[i];
    if (box.checked) {
        chosen_one = changeCardset();
        numCards = qs["chosen_one"].length;
    }
}
if (!chosen_one) numCards = qs["Question Words"].length;

您還必須更改您的changeCardset函數，使其具有類似的for循環來查找已選中的框（如果有）。

Answer 3

這里出問題的關鍵部分是

document.getElementsByTagName("input")

返回一個NodeList。 為了查看此列表的任何參數，需要對其進行迭代。 一種更合適的方法是尋找已檢查的方法。

var chosen_one = $("#card_group input[type=checkbox]:checked");

但是，這里的問題是最多可以檢查3個。 解決該問題將解決您代碼中的問題。