在分配单击侦听器时未获得正确的位置

时间:2014-02-18 10:24:50

标签: javascript jquery

我正在创建一个div并为for循环中的div分配单击侦听器 代码是这样的。

    function selectedPhotosDiv(path){

try{

    var choiceDiv = document.createElement('div');
        choiceDiv.id = "photos"+Buttler.User.chatid;
        choiceDiv.className = "display_photos";
    for(var i=0;i<path.length;i++)
    {   
        var box = document.createElement('div');
        box.className = "img_box";
        box.id = "box"+i;
        box.style.backgroundImage="url('file://"+path[i]+"')";
        var close = document.createElement('div');
        close.className = "img_close";
        $(close).click(function(){
            console.info(i);
        });
        box.appendChild(close);
        choiceDiv.appendChild(box);
    }
    return choiceDiv;
}catch(error){
}

}

然而,在单击关闭时,i的值始终是i的最后一个值,即path.length-1; 我无法弄清楚我在做错误的地方。 需要帮助

3 个答案:

答案 0 :(得分:1)

使用jquery我已经这样做了。见http://jsfiddle.net/4ZW8A/1/

function selectedPhotosDiv(path){

    var $box;
    var $choiceDiv = $('<div id="photos'+ Buttler.User.chatid + '" class="display_photos" >');
    for(var i=0;i<path.length;i++)
    {   
        $box = $('<div id="box' + i + '" class="img_box" >\
                    <div class="img_close">\
                </div>');
        $box.css('background-image', "url('file://"+path[i]+"')");
        $box.find('.img_close').click(function(){
            var index = $(this).parent('.img_box').attr('id').replace('box', ''); 
            console.log(index);
        });

        $choiceDiv.append($box);
    }
    return $choiceDiv;
}

您无法使用i,因为当您点击结束时,其价值可能已经增加。

答案 1 :(得分:0)

尝试:

$(document).on('click', close, function(){
            console.info(i);
        });

或者您可以查看此主题:HERE

答案 2 :(得分:0)

您的问题与javascript闭包有关。 i变量将始终是迭代的最后一个值。

将您的代码更改为此

$(close).click(function(){
    console.info($(this).parrent().attr("id"));
});

蚂蚁它应该工作