javascript - push replaces the old value in the array - Stack Overflow

admin管理员组

文章数量:1287119

Maybe its because I have been working all day and I can't see the problem. But in the following code the alert only shows the last added value and doesn't push the value in the array. :(

window.sortControl = {
            sortControlPanel: $('div.sortControl'),
            simpleSortCriteriaList: $('div.sortControl .simple'),
            advancedSortCriteriaList: $('div.sortControl .advanced'),
            dropDownExpander: $('div.sortControl .dropDownExpand.primary'),
            dropDownContent: $('div.sortControl .dropdownContent.primary'),
            simpleSortCriteria: $('div.sortControl .sortcriteria.simple a'),
            simpleSortCheckboxes: $('.simple .checkbox'),
            openAdvancedButton: $('.openAdvanced'),
            backtoSimpleButton: $('.backtoSimple'),
            advancedDropdownContent: $('div.sortControl .advanced .dropdownContent'),
            advancedDropdownExpander: $('div.sortControl .advanced .dropDownExpand')
        };

 $.each(sortControl.advancedDropdownContent.parent(), function () {

        var dropdownContent = $(this).find('.dropdownContent');
        var input = $(this).find('input');

        $(this).find('.dropDownExpand').live('click', function (event) {
            sortControl.advancedDropdownContent.not(dropdownContent).hide('fast');
            dropdownContent.toggle('fast');
            event.preventDefault();
        });

        var currentSelectedGroups = [];

        $(this).find('li a').bind('click', function (event) {

            var criteria = $(this).text();
            //if (!currentSelectedGroups.inArray($(this).attr('class'), true)) {
            input.attr('value', criteria);
            currentSelectedGroups.push($(this).attr('class'));

            //}

            dropdownContent.toggle('fast');

            event.preventDefault();
            alert(currentSelectedGroups);
        });

    });

Some of the html:

<div class='sortcriteria advanced'>

                <label>Sort by: </label>
                <div class='controlWrapper'>
                    <input type="text" placeholder='Any' value='Any' class='dropDownExpand'>
                    <span  class='icon dropDownExpand' title='Select property type'></span>
                    <ul class='dropdownContent'>
                        <li><a href='#' class='price'>Price ascending</a></li>
                        <li><a href='#' class='price'>Price descending</a></li>
                        <li><a href='#' class='party'>Party size ascending</a></li>
                        <li><a href='#' class='party'>Party size descending</a></li>
                        <li><a href='#' class='bedrooms'>Number of bedrooms ascending</a></li>
                        <li><a href='#' class='bedrooms'>Number of bedrooms descending</a></li>
                        <li><a href='#' class='star'>Star rating ascending</a></li>
                        <li><a href='#' class='star'>Star rating descending</a></li>                           
                    </ul>
                </div> ...

1. There are no JavaScript errors.
2. Content and this script get loaded via ajax
3. All other statements do what they are supposed to

Maybe its because I have been working all day and I can't see the problem. But in the following code the alert only shows the last added value and doesn't push the value in the array. :(

window.sortControl = {
            sortControlPanel: $('div.sortControl'),
            simpleSortCriteriaList: $('div.sortControl .simple'),
            advancedSortCriteriaList: $('div.sortControl .advanced'),
            dropDownExpander: $('div.sortControl .dropDownExpand.primary'),
            dropDownContent: $('div.sortControl .dropdownContent.primary'),
            simpleSortCriteria: $('div.sortControl .sortcriteria.simple a'),
            simpleSortCheckboxes: $('.simple .checkbox'),
            openAdvancedButton: $('.openAdvanced'),
            backtoSimpleButton: $('.backtoSimple'),
            advancedDropdownContent: $('div.sortControl .advanced .dropdownContent'),
            advancedDropdownExpander: $('div.sortControl .advanced .dropDownExpand')
        };

 $.each(sortControl.advancedDropdownContent.parent(), function () {

        var dropdownContent = $(this).find('.dropdownContent');
        var input = $(this).find('input');

        $(this).find('.dropDownExpand').live('click', function (event) {
            sortControl.advancedDropdownContent.not(dropdownContent).hide('fast');
            dropdownContent.toggle('fast');
            event.preventDefault();
        });

        var currentSelectedGroups = [];

        $(this).find('li a').bind('click', function (event) {

            var criteria = $(this).text();
            //if (!currentSelectedGroups.inArray($(this).attr('class'), true)) {
            input.attr('value', criteria);
            currentSelectedGroups.push($(this).attr('class'));

            //}

            dropdownContent.toggle('fast');

            event.preventDefault();
            alert(currentSelectedGroups);
        });

    });

Some of the html:

<div class='sortcriteria advanced'>

                <label>Sort by: </label>
                <div class='controlWrapper'>
                    <input type="text" placeholder='Any' value='Any' class='dropDownExpand'>
                    <span  class='icon dropDownExpand' title='Select property type'></span>
                    <ul class='dropdownContent'>
                        <li><a href='#' class='price'>Price ascending</a></li>
                        <li><a href='#' class='price'>Price descending</a></li>
                        <li><a href='#' class='party'>Party size ascending</a></li>
                        <li><a href='#' class='party'>Party size descending</a></li>
                        <li><a href='#' class='bedrooms'>Number of bedrooms ascending</a></li>
                        <li><a href='#' class='bedrooms'>Number of bedrooms descending</a></li>
                        <li><a href='#' class='star'>Star rating ascending</a></li>
                        <li><a href='#' class='star'>Star rating descending</a></li>                           
                    </ul>
                </div> ...

1. There are no JavaScript errors.
2. Content and this script get loaded via ajax
3. All other statements do what they are supposed to

• javascript
• arrays
• push

Share Improve this question Follow edited Sep 22, 2011 at 22:59 Ali Habibzadeh asked Sep 22, 2011 at 22:50 Ali HabibzadehAli Habibzadeh 11.6k44 gold badges5555 silver badges7878 bronze badges 5

• Where is var currentSelectedGroups = []; declared? Is it in the global scope where it survives from one click to the next? Or is it a local variable somewhere and getting destroyed and recreated and thus it only ever contains the value you just added to it? – jfriend00 Commented Sep 22, 2011 at 22:54
• I updated and question with more sections of the code – Ali Habibzadeh Commented Sep 22, 2011 at 23:00
• I don't know what your intention is, but you're creating a new currentSelectedGroups element for each iteration of the Array. – user113716 Commented Sep 22, 2011 at 23:05
• Thank you so much. I think i am going blind. been at it today for 9 hours...its just being blind. please add your ment as an answer – Ali Habibzadeh Commented Sep 22, 2011 at 23:07
• 1 Also be aware that with $(this).find('.dropDownExpand').live('click',..., the .live() handler will not confine itself to descendants of this. Basically, you're doing $('.dropDownExpand').live('click',... once for each iteration, so you're likely binding redundant handlers. – user113716 Commented Sep 22, 2011 at 23:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You need to move var currentSelectedGroups = []; outside the each loop. You declare it once for every instance - they all work on their own version of the variable because it lives in the local scope of the each function.

Remember in javascript functions = scope

As I asked you (and suspected) in my earlier ment, you need to move:

var currentSelectedGroups = [];

outside the .each() loop. As it is you are re-initializing it to an empty array in each iteration of the loop so it never has more than one value in it. You can do that like this:

var currentSelectedGroups = [];

$.each(sortControl.advancedDropdownContent.parent(), function () {

        var dropdownContent = $(this).find('.dropdownContent');
        var input = $(this).find('input');

        $(this).find('.dropDownExpand').live('click', function (event) {
            sortControl.advancedDropdownContent.not(dropdownContent).hide('fast');
            dropdownContent.toggle('fast');
            event.preventDefault();
        });

        $(this).find('li a').bind('click', function (event) {

            var criteria = $(this).text();
            //if (!currentSelectedGroups.inArray($(this).attr('class'), true)) {
            input.attr('value', criteria);
            currentSelectedGroups.push($(this).attr('class'));

            //}

            dropdownContent.toggle('fast');

            event.preventDefault();
            alert(currentSelectedGroups);
        });

    });

本文标签： javascriptpush replaces the old value in the arrayStack Overflow