在
if($('input[name=answer-opt]:checked').val() == templatePos)
永远不会返回true，即使数字“概念上”匹配。
我尝试了几种方法，包括将 templatePos 转换为字符串或将输入表单值转换为数字，但似乎没有任何效果。
我有以下代码：
$(document).on("click", "#guess-btn", function() {
if(templateCorrect === null) {
// Remove the guessing form
$("#guess-container").remove();
// Get the position of the correct answer
var templatePos = positions.indexOf(0)+1;
if($('input[name=answer-opt]:checked').val() == templatePos) {
templateCorrect = true;
count++;
} else {
templateCorrect = false;
}
positions = showAnswer(currentData, "Twitter");
)};
为什么这不会返回true，我该如何解决？
更新： 这是插入包含相关输入字段的html的函数
function showAnswer(data, stage) {
var positions;
displayNum = Math.floor(Math.random()*5);
switch(displayNum) {
case 0:
firstOption = data["template"];
secondOption = data["twitter"];
thirdOption = data["reddit"];
positions = [0,1,2];
break;
case 1:
firstOption = data["template"];
secondOption = data["reddit"];
thirdOption = data["twitter"];
positions = [0,2,1];
break;
case 2:
firstOption = data["reddit"];
secondOption = data["template"];
thirdOption = data["twitter"];
positions = [2,0,1];
break;
case 3:
firstOption = data["reddit"];
secondOption = data["twitter"];
thirdOption = data["template"];
positions = [2,1,0];
break;
case 4:
firstOption = data["twitter"];
secondOption = data["reddit"];
thirdOption = data["template"];
positions = [1,2,0];
break;
default:
firstOption = data["twitter"];
secondOption = data["template"];
thirdOption = data["reddit"];
positions = [1,0,2];
}
$("#search-container").remove(); // Removes the search box
$("#description-container").remove(); // Removes the description
$("#title-container").after(
'<div id="guess-container">' +
' <div class="row">' +
' <div class="col-xs-5 col-xs-offset-3">' +
' <h2>Which answer came from ' + stage + '?</h2>' +
' </div>' +
' </div>' +
' <form name="guess-form" id="guess-form">' +
' <div class="row">' +
' <div class="col-xs-8 col-xs-offset-3">' +
' <input type="radio" id="radio1" name="answer-opt" value="1" />' +
' <label id="answer-btn-1" for="radio1">'+ firstOption +'</label>' +
' </div>' +
' </div>' +
' <div class="row">' +
' <div class="col-xs-8 col-xs-offset-3">' +
' <input type="radio" id="radio2" name="answer-opt" value="2" />' +
' <label id="answer-btn-2" for="radio2">'+ secondOption +'</label>' +
' </div>' +
' </div>' +
' <div class="row">' +
' <div class="col-xs-8 col-xs-offset-3">' +
' <input type="radio" id="radio3" name="answer-opt" value="3" />' +
' <label id="answer-btn-3" for="radio3">'+ thirdOption +'</label>' +
' </div>' +
' </div>' +
' </form>' +
' <div class="row">' +
' <div class="col-xs-5 col-xs-offset-3">' +
' <button id="guess-btn" class="btn btn-primary" disabled>Guess</button>' +
' </div>' +
' </div>' +
'</div>'
);
return positions;
}
更新2： 在进一步检查和修改之后，我现在将输入类型的值视为未定义。我真的无法解决原因。这是我的完整js代码：
$(document).ready(function() {
var positions;
var currentData;
var twitterCorrect = null;
var redditCorrect = null;
var templateCorrect = null;
var count = 0;
$("#ask-btn").click(function () {
if(!$("#question").val()) {
// The input field is empty so do not submit
} else if(!($("#question").val().match(/[a-z]/i))) {
alert("You're question must contain at least one letter!");
} else {
var q = $("#question").val();
var url = "/answer.php?q="+q;
$.getJSON(url, function(data) {
currentData = data;
/* positions is an array containing the ordering of the responses.
0 = template,
1 = twitter,
2 = reddit.
*/
positions = showAnswer(currentData, "our AI");
});
}
});
$(document).on("change", "input[type=radio]", function() {
$("#guess-btn").prop("disabled", false);
});
$(document).on("click", "#guess-btn", function() {
if(templateCorrect === null) {
$("#guess-container").remove(); // Remove the guessing form
var templatePos = positions.indexOf(0)+1;
var temp = $('input[name=answer-opt]:checked').val();
console.log(temp);
console.log(typeof(temp));
var num = parseInt(temp,10);
console.log(num);
console.log(typeof(num));
if(num === templatePos) {
console.log("template");
templateCorrect = true;
count++;
} else {
templateCorrect = false;
}
positions = showAnswer(currentData, "Twitter");
} else if(twitterCorrect === null) {
$("#guess-container").remove(); // Remove the guessing form
var twitterBtn = "#answer-btn-" + (positions.indexOf(1)+1).toString();
if($(twitterBtn).is(':checked')) {
console.log("Twitter");
twitterCorrect = true;
count++;
} else {
twitterCorrect = false;
}
positions = showAnswer(currentData, "Reddit");
} else if(redditCorrect === null) {
$("#guess-container").remove(); // Remove the guessing form
var redditBtn = "#answer-btn-" + (positions.indexOf(2)+1).toString();
if($(redditBtn).is(':checked')) {
console.log("reddit");
redditCorrect = true;
count++;
} else {
redditCorrect = false;
}
console.log(count);
displayResults(count, templateCorrect, twitterCorrect, redditCorrect);
} else {
console.log("Error with the results process");
}
});
});
function displayResults(count, templateCorrect, twitterCorrect, redditCorrect) {
$("#title-container").after(
'<div id="results" class="row">' +
' <div class="col-xs-5 col-xs-offset-3">' +
' <h2>You Got ' + count.toString() + '/3 Right</h2>' +
' <a href="/ask">Ask another question</a>' +
' </div>' +
'</div>'
);
}