Javascript .click（）不'；更新按钮状态

我正在试着写一个测验，但一旦答案正确，当有另一个问题时，该答案的按钮也会显示正确。我已经尽了一切努力来解决它，但我就是不知道问题出在哪里

JSFIDDLE:

错误重构：在第一个问题上回答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();

});

您应该使用而不是。单击它适用于绑定动态元素，如：

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

您应该使用而不是。单击它适用于绑定动态元素，如：

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

---

您不会解除绑定事件，因此会继续向按钮添加事件。因此，您可以在运行clear（）方法时取消绑定，也可以在添加click之前取消绑定

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

及

---

您不会解除绑定事件，因此会继续向按钮添加事件。因此，您可以在运行clear（）方法时取消绑定，也可以在添加click之前取消绑定

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

及

你不需要这个：

button.click( function() {

因为您已经在所有按钮上应用了click事件

我已经在代码中为JSFIDLE上的此修复程序设置了注释：

https://jsfiddle.net/Lhu7poqu/

现在您只需单击一次，在添加新背景并等待重新呈现新问题后，所有按钮事件都将取消绑定并在下一个问题上再次添加

希望这有帮助

你不需要这个：

button.click( function() {

因为您已经在所有按钮上应用了click事件

我已经在代码中为JSFIDLE上的此修复程序设置了注释：

https://jsfiddle.net/Lhu7poqu/

现在您只需单击一次，在添加新背景并等待重新呈现新问题后，所有按钮事件都将取消绑定并在下一个问题上再次添加

希望这有帮助。

第29行应该是

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

不过，其他人也有一个观点，那就是您正在一次又一次地为单击处理程序创建侦听器。

第29行应该是

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

---

不过，其他人也有一点，那就是您正在一次又一次地为单击处理程序创建侦听器。

在我看来，您的代码中存在多个问题。首先，这不是绑定和解除绑定事件的问题，这是每次调用fill方法时重新绑定新的单击事件的问题，您应该从该函数中提取单击侦听器。概念问题：）

您也不应该检查数据状态的存在，而是应该更有效地检查其值

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

});

---

在我看来，您的代码中存在多个问题。首先，这不是绑定和解除绑定事件的问题，这是每次调用fill方法时重新绑定新的单击事件的问题，您应该从该函数中提取单击侦听器。概念问题：）

您也不应该检查数据状态的存在，而是应该更有效地检查其值

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

});

---

您的JSFIDLE链接似乎工作不正常，您能修复它以帮助您吗？您已经描述了您试图避免的行为，但忘记了描述您想要的行为。无论哪种方式，在每次单击时绑定一个新的单击处理程序可能都不是您想要的。您的JSFIDLE链接似乎工作不正常，您可以修复它来帮助您吗？您已经描述了您试图避免的行为，但忘了描述您想要的行为。不管怎样，在每次单击时绑定一个新的单击处理程序可能不是您想要的。谢谢，但是如上所述的错误现在仍然存在，我错过了第28行。您尝试使用.data从按钮获取数据状态值，现在更改为.attr（'data-state'），并返回字符串“true”

$（this）。单击（function（）{

//替换为

$（this）。打开（'click'

该代码与您的代码完全相同，但是如上所述的错误现在仍然存在，我已经错过了第28行。您尝试从按钮中获取数据状态值。data，现在更改为.attr（'data-state'），并返回字符串“true”

$（this）。单击（函数（）{

//替换为

$（this）。打开（'click'

该代码是100%相同的，但是如上所述的错误仍然存在，但是如上所述的错误仍然存在很多。只剩下一个问题：这是

newClass=（1==button.attr（“数据状态”）？'good'：'bad'；

某种if语句吗？请注意，在下一个（）函数，您应该检查计数是否超出q数组的范围；）@SimonMathewson这肯定是一个if语句，三元。非常感谢。只剩下一个问题：这是

newClass=（1==button.attr（“数据状态”）？“good'：“bad”；

某种if语句吗？请注意，在下一个（）函数，您应该检查计数是否超出q数组的范围；）@SimonMathewson它肯定是一个if语句，三元。请参阅