我在循环中遇到闭包问题，但我仍然使用单独的功能

I am getting closure issue on loop, still i use the separate function

本文关键字：单独 功能 循环 遇到 问题 闭包      更新时间：2023-09-26

在我的循环中，我正在尝试将class名称添加到元素中。 为了避免closure问题，我保留了单独的功能。

但我的问题仍未解决。

我在对象中找到了这样的类名：

<button class="sidebar1 sidebar2 sidebar3 sidebar4 sidebar5">Click</button>

这是我的JS：

var ob = {};
var catcheBars = {};
var sidebar = $('div.sidebar');
var catchedBar = sidebar;

for(i=1; i <= 5; i++) {
    if(!ob.hasOwnProperty(i+'page')) {
        ob[i+'page'] = catchedBar;
    }
    var x = i;
    var x = function (x) {
        $(ob[x+'page']).find('button').addClass('sidebar'+x);
    }(x)

}

$("#sideBar").html(ob['1page']);

住

当你做var catchedBar = sidebar;时，你实际上是在catchedBar引用sidebar对象。 然后在循环中，当你执行ob[i+'page'] = catchedBar;时，你现在正在做另一个引用。

当您在 $(ob[x+'page']) 上执行.addClass()时，您将类添加到集合中的所有内容中ob[x+'page']因为它包含对$('div.sidebar')集合的引用。

对于您要实现的目标而言，此代码有点太复杂了。 可以使用jQuery的.each方法简化它：

$('div.sidebar').each(function(i, v){
    $(v).find('button').addClass('sidebar'+i);
});

注意：我不是100%确定你想做什么。

更新：看到您的评论后，我认为您需要做的就是：

$('div.sidebar button').click(function(){
    $("#sideBar").html($(this).text());
});

演示：http://jsfiddle.net/xtcxv8hd/

我像这样更新，它对我有用

var ob = {};
var catcheBars = {};
var sidebar = $('div.sidebar');
for(i=1; i <= 5; i++) {
    if(!ob.hasOwnProperty(i+'page')) {
        ob[i+'page'] = sidebar.clone(false);
    }
    var x = function (x) {
        $(ob[x+'page']).addClass('sideBar'+x);
    }(i);
}
sidebar.empty();
$("#sideBar").html(ob['1page']);

console.log(ob);

谢谢大家！住

相关文章：