Push 替换数组中的旧值

发布于 2024-12-06 05:15:25 字数 3312 浏览 1 评论 0原文

也许是因为我工作了一整天,我看不到问题所在。但在下面的代码中,警报仅显示最后添加的值,并且不会将值推送到数组中。 :(

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);
        });

    });

一些 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. 没有 JavaScript 错误。
  2. 内容和此脚本通过 ajax 加载
  3. 所有其他语句都执行它们应该执行的操作

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

放我走吧 2024-12-13 05:15:25

您需要将 var currentSelectedGroups = []; 移至每个循环之外。您为每个实例声明一次 - 它们都在自己的变量版本上工作,因为它位于每个函数的本地范围内。

记住 JavaScript 中的函数 = 作用域

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

找回味觉 2024-12-13 05:15:25

正如我在之前的评论中问您(并怀疑)的那样,您需要将:

var currentSelectedGroups = [];

移到 .each() 循环之外。事实上,您在循环的每次迭代中都将其重新初始化为一个空数组,因此它永远不会有多个值。你可以这样做:

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);
        });

    });

As I asked you (and suspected) in my earlier comment, 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);
        });

    });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文