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

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

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

和

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

Answer 2

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

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

    $( 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 3

你应该使用jquery .on而不是.click它适用于绑定动态元素，如：

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

Answer 4

第29行应该是

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

check the updated fiddle

其他人有一点，你正在反复为点击处理程序创建监听器。

Answer 5

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

你不需要这个：

button.click( function() {

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

我已经在JSFiddle的这个修补程序的代码中设置了注释：

https://jsfiddle.net/Lhu7poqu/

现在您点击一次，添加新背景并等待重新呈现新问题后，所有按钮事件都会解除绑定并在下一个问题上再次添加。

希望这有帮助。

.click（）不会更新按钮状态

5 个答案: