Question

此代码显示来自php的解析数据问题是当我选择另一组数据时，解析之前的数据未被清除。我试过清空var json，但没有任何积极的结果。

$(document).ready(function() {
$(".chooseSub").on("click",function(event) {
    event.preventDefault(); 
    var display = $(this).attr("title");
    var idx = 0;
    $.post("includes/learnFunctions.php", {
       learnThis:display
    }, function(data) {
        var json = $.parseJSON(data);
        if (json == 0) {
            $("#spanQ").html("Nothing to show!");
        } else {
            workData(json, idx);
        }
    });
});  

function workData(json, idx){
    function next() {            
        if (idx > (json.length - 1)) {
            idx = 0;
        }
        console.log(idx+" next() start");           
        var text1 = json[idx].question;
        var text2 = json[idx].answer;
        $("#spanQ").html("<p>" + text1 + "</p>");
        $("#spanA").html("<p>" + text2 + "</p>");
        console.log(idx,text1,json);
        console.log(json );           
        idx++;
    }
    $(".test").on("click",function(){
        next();
    });
}

}); //doc ready

这个问题可以在这里模拟

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <script src="js/jquery-1.10.2.js"></script> 
<script>
$(document).ready(function() {
    function workData(custVar){
        var idx =0;
        function again(){
            console.warn(custVar); 
            if (idx > (custVar.length - 1)) {
                idx = 0;
            }         
            var text1 = custVar[idx];
            $("#spanQ").html("<p>" + text1 + "</p>");
            console.log(idx,text1,custVar);         
            idx++;
        }
        $("#id4").on("click",function(){       
            again();
        });
    }
    var customVar1 =  ["green", "black", "red", "blue", "yellow"];
    var customVar2 =  ["one","two", "three", "four", "five"];
    $("#id1").on("click", function(){
       workData(customVar1);
    });
    $("#id2").on("click", function(){
       workData(customVar2);
    });
}); //doc ready
</script>
</head>
<body>
    <div id="id1">Colors</div>
    <br/>
    <div id="id2">Numbers</div>
    <br/>
    <div id="id4">RUN</div>
    <br />
    <span id="spanQ"></span>                            
</div>                        
</body>
</html>

我尝试了几种不同的方法，但没有一种方法适用于区间方案。

$(document).ready(function() {
    var idx = 0;  
    function workData(custVar){      
        clearInterval(myInterval);   
        function again(){
            if (idx > (custVar.length - 1)) {
                idx = 0;
            }         
            text1 = custVar[idx];
            $("#spanQ").html("<p>" + text1 + "</p>");
            console.log(idx,text1,custVar);
            idx++;
        }
        var myInterval = setInterval(again, 2000);
    }
    function manStep(custVar){
        if (idx > (custVar.length - 1)) {
            idx = 0;
       }         
       text1 = custVar[idx];
       $("#spanQ").html("<p>" + text1 + "</p>");
       console.log(idx,text1,custVar);
       idx++;
    };
    var customVar1 =  ["green", "black", "red", "blue", "yellow"];
    var customVar2 =  ["one","two", "three", "four", "five"];
    $("#id1").on("click", function(){
        workData(customVar1);
    }); 
    $("#id2").on("click", function(){
        workData(customVar2);
    });
    $("#id3").on("click", function(){
       clearInterval(interval); 
       var interval = setInterval(function(){manStep(customVar1);}, 2000);
    });
    $("#id4").on("click", function(){
        clearInterval(interval); 
        var interval = setInterval(function(){manStep(customVar2);}, 2000);
    });  
}); //doc ready

Answer 1

如果使用$(".test").on("click", ...)添加事件处理程序，则不会导致删除任何先前的处理程序。相反，每次workData()运行都会注册其他操作，以便在点击.test元素时执行。这就是为什么您看到与workData()的调用一样多的日志输出。

要解决此问题，您应该在添加新事件之前删除任何现有的"click"事件处理程序。 jQuery为此提供off()函数：

var test = $(".test");
test.off("click");
test.on("click", ...);
// or: test.off("click").on("click", ...)

变量值未被清除

1 个答案: