current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

BACKGROUND

I have a list of buyerNames and want the admin user to be able toggle their names. So far so good. Visually it works as expected. Admin user clicks on name and it's toggled on (background around the name and the items changes shade). Admin user can click and unclick names to his heart's desire.

CODE BELOW: I'm showing large sections of my code in case I'm messing something up in a place where I don't think there's a problem.

<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 -->

BACKGROUND

After the admin user has selected his buyers he clicks "show items" to reveal a hidden div below.

PROBLEM: Putting the toggled names into an array.

STEP 1:

Get buyerName (b-on1, b-on2 ... in this test example) and place in array. 

    $(".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.
EXACTLY WHAT WAS EXPECTED (considering I clicked on buyer 1)

STEP 2:

OK. Let's just have b-on1 and get rid of the other classes.

       $(".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);

I get what's expected:
console.log(all) = selectBuyerOff b-on1 selectBuyerOn
console.log(bbb) = b-on1

STEP 3:

NOW let's put it into an array. (This goes immediately after the above code)

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

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

Now here's the problem - the array resets itself after every click.

I want the array to have b-on1 and b-on2 if the user selected those and b-on1 and b-on2 if the user selected b-on1, b-on2, b-on3 (and then untoggled b-on3)

and yet the array is reset after every click.

How do I get this to work?

I tried removing var so that the variable would be in the global scope. I must be missing something simple.

share|improve this question
1  
testArr=[]; is initializing the array every time... place the declaration+init outside the click event. - or am i understanding this wrong? EDIT: Ben Griffiths was faster :D –  Max Bumaye Nov 13 at 15:20

1 Answer 1

up vote 1 down vote accepted

When testArr=[] is executed, the testArr variable is assigned to a brand new empty array.

It sounds like you need to initialize this array just the once outside of the click handler, and then simply push values into the existing array within the handler. For example:

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);
        /* ... */
});
share|improve this answer
1  
Yes, simply push when a new element is selected, and delete when it is deselected. –  Aravind Nov 13 at 15:22
    
Thank you. You can't believe how much time I wasted on this. And Aravind - you answered the follow-up question before I even got to it. Thx. –  Mayo Nov 13 at 15:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.