制作ul li下拉過濾器

Question

我有一個下拉菜單，現在嘗試將其用作過濾器。 當我點擊菜單項開始過濾時傳遞一個值但是我在Jquery部分有點困惑。 如何傳遞“名稱”和“值”並開始過濾。 當我點擊一個項目並過濾時，重要的問題就在於此。 之后，當我點擊下一個項目時，我不希望它重新開始。 我想保留舊的搜索歷史。 並將其添加到新過濾器。

  var allOptions = $(".init").children('li'); $("ul").on("click", function() { allOptions.removeClass('selected'); $(this).addClass('selected'); $("ul").children('.init').html($(this).html()); allOptions.slideUp(); }); 

 #filter-wrapper { margin-top:15px } #filter-wrapper ul { list-style:none; position:relative; float:left; margin:0; padding:0 } #filter-wrapper ul a { display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif } #filter-wrapper ul li { position:relative; float:left; margin:0; padding:0 } #filter-wrapper ul li.current-menu-item { background:#ddd } #filter-wrapper ul li:hover { background:#f6f6f6 } #filter-wrapper ul ul { display:none; position:absolute; top:100%; left:0; background:#fff; padding:0 } #filter-wrapper ul ul li { float:none; width:200px } #filter-wrapper ul ul a { line-height:120%; padding:10px 15px } #filter-wrapper ul ul ul { top:0; left:100% } #filter-wrapper ul li:hover > ul { display:block } 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <div id="filter-wrapper"> <ul> <li name="sortbyprice" class="current-menu-item"><a href="#">Cheapest Cars</a></li> <li name="sortbyprice" class="current-menu-item"><a href="#">Newest Cars</a></li> <li><a href="#">Car Color</a> <ul class="init" name="sortbycolor"> <li data-value="red"><a href="#">Red</a></li> <li data-value="black"><a href="#">Black</a></li> <li data-value="silver"><a href="#">Silver</a></li> </ul> </li> </ul> </div> 

例如，當我選擇紅色時，汽車顏色隨紅色變化。

PS：順便說一句，我給的name="" ，它來自Laravel控制器。 它包含數據。

這是我的舊過濾器。 它正在與此合作。 我可以過濾數據。

   <form>
     <select name="sortbyprice" class="custom-select custom-select-md" style="width: 100px;">
       <option value="asc">cheapest</option>
       <option value="desc">Expensive</option>
     </select>
     <select id="cars" name="cars" class="custom-select custom-select-md" style="width: 100px;">
      <option value="" disabled selected>car colors</option>
      <option value="red">red</option>
      <option value="blue">blue</option>
      <option value="black">black</option>
    </select>
    <button type="submit" name="button" class="btn btn-success" id="filter-btn">Filter</button>
  </form>

Answer 1

不確定這是否是您想要的，但您可以嘗試下面的代碼並告訴我您的想法

 var mockData = [ { make: 'a', color: 'red', price: 1000 }, { make: 'a', color: 'black', price: 2000 }, { make: 'b', color: 'red', price: 1 }, { make: 'a', color: 'silver', price: 3000 }, { make: 'c', color: 'black', price: 1500 }, { make: 'a', color: 'red', price: 1500 } ]; var allOptions = $('.init').children('li'); // use an object to store the filter options selected by the user // you can then use the information in this object to do the filtering // by sending an AJAX request or just filter the already fetched data var filterOptions = { sortbycolor: '', sortbymake: '', sortbyprice: '' }; $(allOptions).on('click', function () { // get the items' data-value var value = $(this)[0].dataset.value; // select the corresponding <a> tag var button = $(this).parent()[0].previousElementSibling; // get the corresponding name attribute, eg sortbycolor var type = $($(this).parent()[0]).attr('name'); // set the filterOptions filterOptions[type] = value; // change the displayed text of the filter when the user select something $(button).text(function (idx, content) { // here I choose using a colon ':' as the separator, // you can use whatever you want var colonIndex = content.indexOf(':'); // example for baseContent is 'Car Color' var baseContent = content; if (colonIndex > -1) { baseContent = content.slice(0, colonIndex); } // eg 'Car Color: red return baseContent + ': ' + value; }); allOptions.slideUp(); console.log('update filterOptions: ', filterOptions); // filter the already fetched data var filteredData = mockData.filter(function (val) { var isValid = true; if (isValid && filterOptions.sortbycolor) { isValid = val.color === filterOptions.sortbycolor; } if (isValid && filterOptions.sortbymake) { isValid = val.make === filterOptions.sortbymake; } return isValid; }); // sort the data by price // hard-code the sorting direction here for simplicity, // you can set this dynamically with the onclick event filterOptions.sortbyprice = 'asc'; if (filterOptions.sortbyprice === 'asc') { filteredData.sort(function (a, b) { return a.price - b.price; }); } else if (filterOptions.sortbyprice === 'desc') { filteredData.sort(function (a, b) { return b.price - a.price; }); } console.log('filteredData: ', filteredData); // or you can send an ajax request to the server, // and let the server handle the filtering for you // you have to set the keys and values inside // the 'data' youself, below is just an example // as I don't know what your server's API looks like $.get({ url: 'url-to-your-server', data: { color: filterOptions.sortbycolor, make: filterOptions.sortbymake }, success: function (response) { // do something with the response, // maybe it contains the filtered result // however, I am not sure how does your API look like } }); }); // to deal with the left over css style(display: none) introduced by .slideUp() $('.dropdown').on('mouseenter', function () { allOptions.css('display', 'block'); }); console.log('initial filterOptions: ', filterOptions); 

 #filter-wrapper { margin-top: 15px } #filter-wrapper ul { list-style: none; position: relative; float: left; margin: 0; padding: 0 } #filter-wrapper ul a { display: block; color: #333; text-decoration: none; font-weight: 700; font-size: 12px; line-height: 32px; padding: 0 15px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif } #filter-wrapper ul li { position: relative; float: left; margin: 0; padding: 0 } #filter-wrapper ul li.current-menu-item { background: #ddd } #filter-wrapper ul li:hover { background: #f6f6f6 } #filter-wrapper ul ul { display: none; position: absolute; top: 100%; left: 0; background: #fff; padding: 0 } #filter-wrapper ul ul li { float: none; width: 200px } #filter-wrapper ul ul a { line-height: 120%; padding: 10px 15px } #filter-wrapper ul ul ul { top: 0; left: 100% } #filter-wrapper ul li:hover>ul { display: block } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter-wrapper"> <ul> <li name="sortbyprice" class="current-menu-item"><a href="#">Cheapest Cars</a></li> <li name="sortbyprice" class="current-menu-item"><a href="#">Newest Cars</a></li> <li class="dropdown"> <a href="#" id="car-color">Car Color</a> <ul class="init" name="sortbycolor"> <li data-value="red"><a href="#">Red</a></li> <li data-value="black"><a href="#">Black</a></li> <li data-value="silver"><a href="#">Silver</a></li> </ul> </li> <li class="dropdown"> <a href="#" id="make">Make</a> <ul class="init" name="sortbymake"> <li data-value="a"><a href="#">A</a></li> <li data-value="b"><a href="#">B</a></li> <li data-value="c"><a href="#">C</a></li> </ul> </li> </ul> </div> 

Answer 2

我刪除了你的CSS，你只是對顏色值感興趣 - 對嗎？

<div id="filter-wrapper">
    <ul>
        <li name="sortbyprice" class="current-menu-item"><a href="#">Cheapest Cars</a></li>
        <li name="sortbyprice" class="current-menu-item"><a href="#">Newest Cars</a></li>

        <li><a href="#">Car Color</a>
            <ul class="init" name="sortbycolor">
                <li><a href="#" data-value="red">Red</a></li>
                <li><a href="#" data-value="black">Black</a></li>
                <li><a href="#" data-value="silver">Silver</a></li>
            </ul>
        </li>
    </ul>
</div>

<script>
    var allOptions = $(".init").children('li');

    // I think you are only interested in the html content of the a (anchor)

    $("li[data-value] > a").on("click", function(e) {
        e.preventDefault();

        allOptions.removeClass('selected');
        $(this).addClass('selected');

        let filterVal = $(this).data('value'); // do something with this ...
        let li = $('<li />').html( filterVal);
        $("ul.init").html('').append( li); // ul.init just has the value of the filter

        // allOptions.slideUp(); // superfluos
    });
</script>