Question

这是我的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" >

$(document).ready(function() {

    var qtypes = ['Text','Area'];

    for(qt in qtypes){

        console.log('#submitQuestion' + qtypes[qt] + ' ' + qt);
        var name = '#submitQuestion' + qtypes[qt];
        $(name).click(function(){
            console.log('clicked ' + name);
        });
        $('#submitQuestion' + qtypes[0]).click();
    }

    $('#submitQuestion' + qtypes[0]).click();
    $('#submitQuestion' + qtypes[1]).click();

});


</script>
<input type="button" id="submitQuestionText" value="submit Question" />
<input type="button" id="submitQuestionArea" value="submit Area" />

控制台输出中的结果：

#submitQuestionText 0
clicked #submitQuestionText
#submitQuestionArea 1
clicked #submitQuestionArea
clicked #submitQuestionArea
clicked #submitQuestionArea

为什么使用for循环覆盖所有click（）函数？我希望看到输出的最后两行是：

clicked #submitQuestionText
clicked #submitQuestionArea

Answer 1

因为您在闭包中使用全局变量，请参阅test here

$(document).ready(function() {

    var qtypes = ['Text','Area'];

    for(qt in qtypes){

        console.log('#submitQuestion' + qtypes[qt] + ' ' + qt);
        var name = '#submitQuestion' + qtypes[qt];
        $(name).data('name', name);
        $(name).click(function(){
            console.log('clicked ' + $(this).data('name') + '<br/>');
        });    
    }

    $('#submitQuestion' + qtypes[0]).click();
    $('#submitQuestion' + qtypes[1]).click();

});

Answer 2

您正在循环中创建一个闭包，根据MDN是一个常见的错误。请阅读MDN上的this，特别是关于循环闭包的部分。

Answer 3

komelgman的回答是正确的。

就代码而言，您也可以只替换

for(qt in qtypes){

使用像这样的jQuery迭代器：

$.each(qtypes, function(qt, qt_value) {

不要忘记关闭函数'.each'的括号！

此外，现在您可以在函数体中使用'qt_value'而不是'qtypes [qt]'。

Answer 4

根据您的需要，您可以将点击功能移出循环，如下所示：

$(document).ready(function() {
    var qtypes = ['Text','Area']
    var qsel = 'Text';

    //updated code (click function)
    function clickThis(name){
        $(name).live('click', function(){
            console.log('clicked'+name);           
        });                           
    }    
    //end updated code

    for(qt in qtypes){
        console.log('#submitQuestion' + qtypes[qt] + ' ' + qt);
        var name = '#submitQuestion' + qtypes[qt];           
        //updated code
        clickThis(name);
        //end updated code       
        $('#submitQuestion' + qtypes[0]).click();
    }
    $('#submitQuestion' + qtypes[0]).click();
    $('#submitQuestion' + qtypes[1]).click();
});

jsfiddle：http://jsfiddle.net/brAuL/

我希望它有所帮助。

干杯！

jQuery定义点击功能会覆盖所有点击功能

4 个答案: