。点击（）不更新按钮状态

Question

我想写一个测验，但一旦一个答案是正确的，这个问题的答案的按钮也证明是正确的，当有另外一个问题。我已经竭尽所能来解决它​​，但我只是没有一个线索是什么问题。

的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(); 

}); 

Answer 1

在我看来，我们在您的代码多个问题。首先，它不是绑定的问题和解除绑定事件，这是每次打电话给你补法时间重新绑定新的单击事件的问题，您应该从这个函数提取点击监听。观念问题:)

你也应该不会检查数据状态的存在，而是你应该检查它的价值，更高效。

$(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'); 
     } 
    }); 

}); 

Working demo here :)

Answer 2

您应该使用jquery .on代替。点击它是适合结合动态元素，如：

$('#answ').on('click', 'button', function() {}); 

Answer 3

所以你不断添加事件按钮你不取消绑定事件。所以，你可以取消在运行clear（）方法或者你可以解除绑定您添加点击右侧前。

$(this).off("click").on("click", function() { ... } 

和

button.off("click").on("click", function() { ... }); 

Answer 4

$(this).click(function() { 
// replace with 
$(this).on('click' 

，你不需要这样的：

我设置你的意见

button.click(function() { 

，因为你已经对所有的按钮applyed点击事件在JSFiddle上的此修补程序的代码中：

https://jsfiddle.net/Lhu7poqu/ 

现在你有点击一次，增加新的背景，并等待重新呈现新的问题之后，所有的按钮事件unbinded和接下来的问题再次添加。

希望这会有所帮助。

Answer 5

第29行应阅读

if (button.attr("data-state") == "true") { 

check the updated fiddle

其他人有他的道理，虽然，你的点击处理程序一遍又一遍地创建侦听。