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变量将分配给一个全新的空数组。

听起来你需要在click处理程序的外部之前初始化这个数组，然后简单地将值推送到处理程序中的现有数组中。例如：

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);
        /* ... */
});

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

1 个答案: