從具有單選按鈕的多個表單中獲取唯一值 - jQuery

Question

我正在為求職面試創建一個瑣事游戲，到目前為止我已經創建了一個循環，用單選按鈕填充表單以供選擇。

我遇到的問題是計分器。 我只需要計算正確的響應，最好是按表單點擊。 現在，當我選擇一個答案然后單擊它添加到分數的任何其他答案時，因為至少選擇了一個正確答案，

HTML

<div id="trivia">
    <form class='card0'>
       <text>Question</text>
       <input type="radio" id="Answer" value="correct" name="question0">
       <label for="Answer">Answer</label>
       <input type="radio" id="Wrong" value="incorrect" name="question0">
       <label for="Answer">Wrong</label>
    </form>
    <form class='card1'>
       <text>Question</text>
       <input type="radio" id="Answer" value="correct" name="question1">
       <label for="Answer">Answer</label>
       <input type="radio" id="Wrong" value="incorrect" name="question1">
       <label for="Answer">Wrong</label>
    </form>
</div>

jQuery

 for(j=0;j<21;j++){
        var score = 0;
        $('.card' + j + ' input').on('click', function(e){
            e.preventDefault();
            var radioVal = $('input[value=correct]').val();
            if(radioVal){
                score+=1
                console.log(score)
            }
        })
    }

Answer 1

提示

• 確保所有元素都有唯一的 ID
• 用標簽包裹單選按鈕，它更容易和更干凈
• 使用事件委托，通過在 div 級別分配事件處理程序，而不是分配給每個單選按鈕
• 您可能可以使用單個表單元素

 $('#trivia').on('click', e => { let div = $("#trivia"); let rbs = div.find('input[type="radio"][value="correct"]'); let rbsChecked = 0; $(rbs).each((i, e) => { if (e.checked) rbsChecked++; }); $("#score").text(rbsChecked + "/" + rbs.length); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="trivia"> <form class='card0'> <text>Question</text> <label><input type="radio" id="Answer0" value="correct" name="question0">Answer</label> <label><input type="radio" id="Wrong0" value="incorrect" name="question0">Wrong</label> </form> <form class='card1'> <text>Question</text> <label><input type="radio" id="Answer1" value="correct" name="question1">Answer</label> <label><input type="radio" id="Wrong1" value="incorrect" name="question1">Wrong</label> </form> </div> <output id="score"></output>

祝你好運