Question

我正在开发一个功能，用户可以按月，位置和名称过滤事件列表（在影院中显示等）。

因为他们可以选择多个过滤器，所以在包含用户选择的下拉菜单下方会显示一个列表。

我的问题是，无论点击哪个元素，都会将其添加到所有三个列表中。如果未选中某个选项，则仅从第一个列表（包含月份的列表）中删除该选项。

请参阅jQuery代码：

        var options = [];

        var currentSelectionMonths = [];
        var currentSelectionLocations = [];
        var currentSelectionEvents = [];

        $('.dropdown-menu a').on('click', function (event)
        {
            var $target = $(event.currentTarget),
                val = $target.attr('data-value'),
                $inp = $target.find('input'),
                idx;

            if ((idx = options.indexOf(val)) > -1)
            {
                options.splice(idx, 1);
                setTimeout(function () { $inp.prop('checked', false) }, 0);

                if (options.length === 0)
                {
                    $('.currentselection').hide();
                }

                if ($(this).parent('#months'))
                {
                    currentSelectionMonths.splice(idx, 1);  
                    $('.timelist').html(currentSelectionMonths);
                }

                if ($(this).parent('#locations'))
                {
                    currentSelectionMonths.splice(idx, 1);
                    $('.locationlist').html(currentSelectionLocations);
                }

                if ($(this).parent('#events'))
                {
                    currentSelectionMonths.splice(idx, 1);
                    $('.eventlist').html(currentSelectionEvents);
                }
            }
            else
            {
                options.push(val);
                setTimeout(function () { $inp.prop('checked', true) }, 0);

                $('.currentselection').show();

                if ($(this).parent('#months'))
                {
                    currentSelectionMonths.push($(this).attr('data-value') + ' ');
                    $('.timelist').html(currentSelectionMonths);
                }

                if ($(this).parent('#locations'))
                {
                    currentSelectionLocations.push($(this).attr('data-value') + ' ');
                    $('.locationlist').html(currentSelectionLocations);
                }

                if ($(this).parent('#events'))
                {
                    currentSelectionEvents.push($(this).attr('data-value') + ' ');
                    $('.eventlist').html(currentSelectionEvents);
                }
            }

            $(event.target).blur();

            console.log(options);
            return false;
        });

和相应的html：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6" style="background-color: greenyellow;">
            <div class="dropdowns" style="display: inline;">
                <div class="dropdown" style="display: inline;">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                        Zeitraum
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" id="months">
                        @foreach (var month in Model.MonthsList)
                        {
                            <li><a href="#" data-value="@month" tabIndex="-1"><input type="checkbox" class="timeboxes" />&nbsp;@month</a></li>
                        }
                    </ul>
                </div>
                <div class="dropdown" style="display: inline;">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                        Spielstätte
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" id="locations">
                        @foreach (var location in Model.LocationList)
                        {
                            <li><a href="#" data-value="@location" tabIndex="-1"><input type="checkbox" class="locationboxes" />&nbsp;@location</a></li>
                        }
                    </ul>
                </div>
                <div class="dropdown" style="display: inline;">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                        Produktion
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" id="events">
                        @foreach (var evnt in Model.EventsList)
                        {
                            <li><a href="#" data-value="@evnt" tabIndex="-1"><input type="checkbox" class="eventboxes" />&nbsp;@evnt</a></li>
                        }
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <br />
    <div class="container-fluid currentselection" style="display: none;">
        <div class="headline">
            <h3>Aktuelle Auswahl:</h3>
        </div>
        <div class="row">
            <div class="col-lg-1">
                <p>Zeitraum: </p>
            </div>
            <div class="col-lg-10">
                <span class="timelist"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-1">
                <p>Spielstätte: </p>
            </div>
            <div class="col-lg-10">
                <span class="locationlist"></span>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-1">
                <p>Produktion: </p>
            </div>
            <div class="col-lg-10">
                <span class="eventlist"></span>
            </div>
        </div>
    </div>
</div>

我尝试使用else语句嵌套if语句：没有变化。我尝试选择li元素而不是：没有变化。我试图寻找孩子而不是父母：没有变化。

显然有一些我没看到的东西，请帮忙:)。

修改不要担心greenyellow背景，它仅用于测试目的：D

EDIT2： 正如我发现的那样（并且schellmax也这样做了）{} {}必须更改为parent(...)。删除项目不起作用的原因是程序员在花费太多时间寻找解决方案后会失明：我试图仅从一个列表中删除，三次parents(...)

Answer 1

if ($(this).parents('#months'))

应该是

if ($(this).parents('#months').length)

parent()（因为大多数jquery函数）总是返回一个jquery对象，它总是求值为true，所以你必须检查length属性，如果没有结果则为'0'，评估为false。

jQuery：代码为dom添加了太多的html

1 个答案: