。点击()不更新按钮状态
我想写一个测验,但一旦一个答案是正确的,这个问题的答案的按钮也证明是正确的,当有另外一个问题。我已经竭尽所能来解决它,但我只是没有一个线索是什么问题。。点击()不更新按钮状态
的jsfiddle:http://jsfiddle.net/bz6v5nbv/1/
错误重建:以第一个问题答案C(正确),并再次C(此时它实际上B的)在第二个。即使B是正确的,点击时C也是绿色的。
$(document).ready(function() {
var q = [];
q[1] = [3, "1", "Musik", "Welches Hotel ist sehr musikalisch?", "Hotel California",
"Riu Hotel", "Tokio Hotel", "Hotel Mama"];
q[2] = [2, "1", "Musik", "Was sitzt in einer Konservendose, singt und liest Nachrichten vor?",
"ein Schwammoli", "ein Radioli", "ein Tivoli", "ein Tivoli"];
q[3] = [4, "1", "Musik", "dd",
"ein Schwammoli", "ein Radioli", "ein Tivoli", "ein Tivoli"];
var fill = function(data) {
//buttons get filled with data from the array
$("#number").html(data[1]);
$("#cat").html(data[2]);
$("#ques span").html(data[3]);
$("#answ .answ:nth-child(1) button").html(data[4]);
$("#answ .answ:nth-child(2) button").html(data[5]);
$("#answ .answ:nth-child(3) button").html(data[6]);
$("#answ .answ:nth-child(4) button").html(data[7]);
$("#answ .answ:nth-child(" + data[0] + ") button").attr("data-state", "true");
//images are set, depending on the true/false state of the button
$("#answ .answ button").each(function() {
$(this).click(function() {
var button = $(this);
$(this).css("background-image", "url(images/btnBgLogged.png)");
$(this).css("border-image-source", "url(images/btnLogged.png)");
button.click(function() {
if (button.data("state") == true) {
button.css("background-image", "url(images/btnBgTrue.png)");
button.css("border-image-source", "url(images/btnTrue.png)");
} else {
button.css("background-image", "url(images/btnBgFalse.png)");
button.css("border-image-source", "url(images/btnFalse.png)");
}
setTimeout(next, 3000);
});
});
})
}
var clear = function() {
$("#answ .answ:nth-child(1) button").removeAttr("style");
$("#answ .answ:nth-child(2) button").removeAttr("style");
$("#answ .answ:nth-child(3) button").removeAttr("style");
$("#answ .answ:nth-child(4) button").removeAttr("style");
$("#answ .answ:nth-child(1) button").removeAttr("data-state");
$("#answ .answ:nth-child(2) button").removeAttr("data-state");
$("#answ .answ:nth-child(3) button").removeAttr("data-state");
$("#answ .answ:nth-child(4) button").removeAttr("data-state");
}
var count = 1;
function next() {
clear();
fill(q[count]);
count++;
}
next();
});
在我看来,我们在您的代码多个问题。首先,它不是绑定的问题和解除绑定事件,这是每次打电话给你补法时间重新绑定新的单击事件的问题,您应该从这个函数提取点击监听。观念问题:)
你也应该不会检查数据状态的存在,而是你应该检查它的价值,更高效。
$(document).ready(function() {
var q = [];
q[1] = [3, "1", "Musik", "Welches Hotel ist sehr musikalisch?", "Hotel California",
"Riu Hotel", "Tokio Hotel", "Hotel Mama"];
q[2] = [2, "1", "Musik", "Was sitzt in einer Konservendose, singt und liest Nachrichten vor?",
"ein Schwammoli", "ein Radioli", "ein Tivoli", "ein Tivoli"];
q[3] = [4, "1", "Musik", "dd",
"ein Schwammoli", "ein Radioli", "ein Tivoli", "ein Tivoli"];
var fill = function(data) {
$("#number").html(data[1]);
$("#cat").html(data[2]);
$("#ques span").html(data[3]);
$("#answ .answ:nth-child(1) button").html(data[4]);
$("#answ .answ:nth-child(2) button").html(data[5]);
$("#answ .answ:nth-child(3) button").html(data[6]);
$("#answ .answ:nth-child(4) button").html(data[7]);
$("#answ .answ button").attr("data-state", "0");
$("#answ .answ:nth-child(" + data[0] + ") button").attr("data-state", "1");
}
var clear = function() {
$("#answ .answ button").removeAttr("class");
$("#answ .answ button").removeAttr("data-state");
}
var count = 1;
function next() {
clear();
fill(q[count]);
count++;
}
next();
$("#answ").on('click', '.answ button', function(){
var button = $(this);
console.log(button.attr("data-state"));
if(button.hasClass('clicked')){
newClass = (1 == button.attr("data-state")) ? 'good' : 'bad';
button.removeClass('clicked').addClass(newClass);
setTimeout(next, 3000);
}
else {
button.addClass('clicked');
}
});
});
非常感谢,只剩下一个问题:是这个 'newClass =(1 == button.attr(“数据状态“))?'好':'坏';' 某种if语句? – 2015-02-24 15:47:06
请注意,在你的next()函数,你应该检查count是否超出你的q数组的范围;) – 2015-02-24 15:47:24
@SimonMathewson这绝对是一个if语句,三元组。请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator – 2015-02-24 15:48:59
所以你不断添加事件按钮你不取消绑定事件。所以,你可以取消在运行clear()方法或者你可以解除绑定您添加点击右侧前。
$(this).off("click").on("click", function() { ... }
和
button.off("click").on("click", function() { ... });
这似乎并不工作。你能更新小提琴吗? – 2015-02-24 15:02:51
http://jsfiddle.net/uamyuncb/ – epascarello 2015-02-24 15:10:19
谢谢,但是如上所述,错误仍然存在 – 2015-02-24 15:35:42
$(this).click(function() {
// replace with
$(this).on('click'
,你不需要这样的:
我设置你的意见
button.click(function() {
,因为你已经对所有的按钮applyed点击事件在JSFiddle上的此修补程序的代码中:
https://jsfiddle.net/Lhu7poqu/
现在你有点击一次,增加新的背景,并等待重新呈现新的问题之后,所有的按钮事件unbinded和接下来的问题再次添加。
希望这会有所帮助。
谢谢,但是如上所述,错误仍然存在 – 2015-02-24 15:25:08
立即尝试, 我错过了第28行。 您尝试从.data按钮获取数据状态值,现在更改为.attr('data-state')并返回字符串“true” – 2015-02-24 15:39:03
'$(this).click(function(){' //替换为 '$(this).on('click''那个代码是100%相同的 – epascarello 2015-02-24 15:45:00
第29行应阅读
if (button.attr("data-state") == "true") {
其他人有他的道理,虽然,你的点击处理程序一遍又一遍地创建侦听。
你的jsfiddle链接似乎无法正常工作,您可以修复它来帮你吗? – Jaay 2015-02-24 14:51:18
你已经描述了你想要避免的行为,但是你忘记描述你想要的行为。无论哪种方式,绑定一个新的点击处理程序,每次点击*可能不是你想要的* – blgt 2015-02-24 14:53:28