.click(）不会't续订按钮状态

.click() doesn't renew button state

本文关键字：按钮 状态 不会 click      更新时间：2024-05-01

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

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

此处的工作演示：）

您没有解除事件绑定，所以您一直在向按钮添加事件。因此，您可以在运行clear（）方法时取消绑定，也可以在添加click之前取消绑定。

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

和

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

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

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

第29行应读取

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

检查更新的fiddle

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

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

你不需要这个：

button.click( function() {

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

我已经在JSFiddle:上为这个修复程序的代码中为您设置了注释

https://jsfiddle.net/Lhu7poqu/

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

希望这能有所帮助。

相关文章：