Java筛选器系统的搜索字段中的单击事件

Question

我正在创建一个过滤器系统，用户可以在其中单击任何输入元素，然后显示一个具有更详细过滤器选项的div。有点像airbnb风格。

我对第一个元素（搜索元素）的解决方案非常有效，但是编码方式并不令人满意，因为对css类和/或层次结构的少量更改会立即破坏它。

我的HTML结构如下：

<div class="app-content">
    <div class="content-wrapper">
        <div class="page-wrapper">
            <div class="content-body">
                <hr>
                <div class="row mt-1">
                    <div class="col-3">
                        <fieldset class="form-group position-relative has-icon-left">
                            <input type="search" id="freetext-input-field" class="form-control form-control-lg input-lg freetext-nohide" placeholder="Zoekterm" role="button" data-target="#collapseFreetext" aria-expanded="false" aria-controls="collapseFreetext">
                            <div class="form-control-position freetext-nohide">
                                <i class="icon-magnifier font-medium-4 freetext-nohide"></i>
                            </div>
                        </fieldset>
                    </div>

                    <div class="col-1 filter-box text-center">
                        <button type="button" class="btn btn-outline-secondary btn-sm square" data-toggle="collapse" data-target="#collapseInterests" aria-expanded="false" aria-controls="collapseInterests">Wat wil je doen?</button>
                    </div>
                    <div class="col-1 filter-box text-center">
                        <button type="button" class="btn btn-outline-secondary btn-sm square">Locatie</button>
                    </div>
                    <div class="col-1 filter-box text-center">
                        <button type="button" class="btn btn-outline-secondary btn-sm square">Datum</button>
                    </div>
                    <div class="col-1 filter-box text-center">
                        <button type="button" class="btn btn-outline-secondary btn-sm square">Meer filters</button>
                    </div>
                </div>
                <!-- Free text search expand box -->
                <div class="row form-group mb-0">
                    <div id="freetext-filter-box" class="col-lg-6 col-md-9 col-xs-6">
                        <div class="collapse inner-expanded-filter freetext-nohide" id="collapseFreetext">
                            <h5 class="p-1 card-title mb-0 font-weight-bold freetext-nohide d-inline-block">Huidige zoekopdracht:</h5>
                            <span class="freetext-nohide freetext-input-holder"></span>
                            <hr class="m-0 freetext-nohide">
                            <h5 class="p-1 card-title mb-0 font-weight-bold freetext-nohide">Recente zoekopdrachten:</h5>
                            <div class="row search-history-highlight p-1 search-history-selector">
                                <div class="col-12 search-history-selector">
                                    <i class="la la-history search-history-selector"></i> Dierenbescherming
                                </div>
                            </div>
                            <div class="row search-history-highlight p-1">
                                <div class="col-12">
                                    <i class="la la-history"></i> Gezelschap
                                </div>
                            </div>
                            <div class="row search-history-highlight p-1">
                                <div class="col-12">
                                    <i class="la la-history"></i> Bijklussen
                                </div>
                            </div>
                            <hr class="m-0 freetext-nohide">
                            <div class="row">
                                <div class="col-12 freetext-nohide">
                                    <div class="filter-footer text-muted">
                                        <span class="float-left p-2 font-weight-bold freetext-nohide">
                                            <a href="#" class="freetext-nohide filter-box-buttons filter-delete">WISSEN</a>
                                        </span>
                                        <span class="float-right p-2 font-weight-bold freetext-nohide">
                                            <a href="#" class="freetext-nohide filter-box-buttons">TOEPASSEN</a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我的jQuery代码如下：

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];

$(document).ready(function(){
    'use strict';

    //Setup the listeners for the freetext input search field
    setupFreetextField();
});

function setupFreetextField() {
    //Click listener for the filters
    $('.app-content').on('click',function(e){
        //This code checks whether an element inside the freetext-filter-box was clicked (which is marked with the freetext-nohide class). In that case, do not close the box.
        if (e.target.classList.contains('freetext-nohide')) {
            if (e.target.classList.contains('filter-box-buttons')) {
                //We close the filters
                $('#collapseFreetext').collapse('hide');
                if (e.target.classList.contains('filter-delete')) {
                    $('#freetext-input-field').val('');
                    $('.freetext-input-holder').text('');
                }

                console.log("launching the search...");
            } else {
                $('#collapseFreetext').collapse('show');
            }
        } else {
            $('#collapseFreetext').collapse('hide');
            if (e.target.classList.contains('search-history-selector')) {
                //An item from recent search history is clicked
                //PROBLEM: how to get the recent search elements here
            }

            console.log("launching the search...");
        }
    });

    $('#freetext-input-field').on('keyup', function(e) {
        $('.freetext-input-holder').text(e.target.value);
    });

    //If the 'X' is clicked in the search field. Clear the value and perform a search.
    $('input[type=search]').on('search', function () {
        $('#collapseFreetext').collapse('hide');
        $('#freetext-input-field').val('');
        $('.freetext-input-holder').text('');

        console.log("launching the search...");
    });
}

在尝试选择搜索历史选择器之一时，我已经遇到问题。这些是我的结果，如果已设置，我将从用户的Cookie中获取这些结果。

JSFiddle： https://jsfiddle.net/a8t76dvy/