写入数组时Javascript中的范围问题

Question

背景

我有一个buyerNames 列表，并希望管理员用户能够切换他们的名字。到现在为止还挺好。从视觉上看，它按预期工作。管理员用户单击名称并打开它（名称周围的背景和项目更改阴影）。管理员用户可以根据自己的意愿单击和取消单击名称。

代码如下：我正在展示我的大部分代码，以防我搞砸了 我认为没有问题的地方。

<div class="headerSecondaryBg"> <!-- THE BACKGROUND LAYER - POSITION AND COLOR -->
    <div class="buyerItems"> <!-- NUMBER OF BUYER ITEMS -->
        <div class="item i1">42</div>
        <div class="item i2">31</div>
        <div class="item i3">57</div>
        <div class="item i4">49</div>
        <div class="item i5">16</div>
        <div class="item i6">38</div>
        <div class="item i7">24</div>
    </div>
    <div class="buyerNames"> <!-- BUYER NAMES --> 
        <div class="buyer b1">BUYERNAME 1 </div>
        <div class="buyer b2">BUYERNAME 2 </div>
        <div class="buyer b3">BUYERNAME 3 </div>
        <div class="buyer b4">BUYERNAME 4 </div>
        <div class="buyer b5">BUYERNAME 5 </div>
        <div class="buyer b6">BUYERNAME 6 </div>
        <div class="buyer b7">BUYERNAME 7 </div>
    </div>
    <div class="selectBuyer"> <!-- CREATES THE VISIBLE ON / OFF FOR THE TOGGLE AS PER DESIGN SPEC -->
        <div class="selectBuyerOff b-on1"></div>
        <div class="selectBuyerOff b-on2"></div>
        <div class="selectBuyerOff b-on3"></div>
        <div class="selectBuyerOff b-on4"></div>
        <div class="selectBuyerOff b-on5"></div>
        <div class="selectBuyerOff b-on6"></div>
        <div class="selectBuyerOff b-on7"></div>
    </div>      
</div><!-- // END headerSecondaryBg --> 

背景

管理员用户选择他的买家后，他点击“显示项目”以显示下面隐藏的 div。

问题：将切换后的名称放入数组中。

第 1 步：

获取buyerName（本测试示例中为b-on1，b-on2 ...）并放入数组中。

    $(".selectBuyer div" ).click(function(){
        $(this).toggleClass("selectBuyerOn"); // show user that items are on or off
            var all=$(this).attr('class');
            console.log(all);

console.log = selectBuyerOff b-on1 selectBuyerOn.
完全符合预期（考虑到我点击了买家 1）

第 2 步：

好的。让我们只使用 b-on1 并摆脱其他类。

       $(".selectBuyer div" ).click(function(){
            $(this).toggleClass("selectBuyerOn"); // show user that items are on or off
               var all=$(this).attr('class');
               bbb=$(this).attr('class').split(' ')[1];
               console.log(all);
               console.log(bbb);

我得到了预期的结果：
console.log(all) = selectBuyerOff b-on1 selectBuyerOn
console.log(bbb) = b-on1

第 3 步：

现在让我们把它放到一个数组中。 （紧跟在上面的代码之后）

    testArr=[];
    testArr.push(all);
    testArr.push(bbb);
    console.log(testArr);

console.log = ["selectBuyerOff b-on1 selectBuyerOn", "b-on1"]

现在问题来了 - 阵列在每次点击后都会自行重置。

如果用户选择了 b-on1 和 b-on2 并且 b-on1 和 b-on2 如果用户选择了 b-on1、b-on2、b-on3（然后取消切换 b-on3）

但每次单击后数组都会重置。

如何让它工作？

我尝试删除 var 以便该变量位于全局范围内。我一定错过了一些简单的东西。

Answer 1

当testArr=[]被执行时，testArr变量被赋值给一个全新的空数组。

听起来您需要在点击处理程序的一次外部初始化这个数组，然后简单地将值推送到处理程序内的现有数组中。例如：

var testArr = [];
$(".selectBuyer div" ).click(function(){
        $(this).toggleClass("selectBuyerOn"); // show user that items are on or off
        var all=$(this).attr('class');
        bbb=$(this).attr('class').split(' ')[1];
        testArr.push(all);
        testArr.push(bbb);
        console.log(testArr);
        /* ... */
});