Как запустить условие нескольких функций в каждом элементе массива на основе флажка multi в jquery - PullRequest
0 голосов
/ 05 февраля 2020

Я искал несколько дней, как создать это.

Вот как выглядит мульти-флажок enter image description here

Я знаю, как фильтровать массив, когда я щелкнул только один флажок, например, когда я щелкнул 0 - 50 долларов США, результатом будет весь элемент с adult_fee <50. Но я не знаю, как я могу добавить другое условие. Я пробовал $ .grep, но не могу заставить его работать. </p>

У меня есть такой массив, который хранится в переменной dataModified.

enter image description here

Вот мой код

var checkVals = [];
    var checks =  $(':checkbox[name^=filter]');
    checks.change(function(){
        var filteredData = [];

        // get all values
        var arr = $('input:checkbox:checked').map(function () {
            return this.value;
        }).get();

        // if no check detected
        var checked = $(this).filter(':checked'); 
        if(!checked.length){
            $(".tours").empty().prepend(data);
            return; 
        }

        // get all the data then filter
        dataModified.map(function(dataMap) {
            return arr.map(function(a){
                return dataMap.filter(function(filteredDatas){
                    // just removing USD then convert to integer
                    adultFee = filteredDatas.adult_fee.replace('USD', '');
                    if(a === "p1") {
                        if(parseInt(adultFee) < 50){
                            // i can get the filtered data
                            console.log(filteredDatas)
                        }
                    }
                });
            })
        })
    });

Вот где я добавляю массив условий, если пользователь проверяет

arr.map(function(cv){
    if(cv === "p1") {
        conditions.push(function(item) {
            adultFee = item.adult_fee.replace('USD', '');
            return parseInt(adultFee) < 50;
        });
    } 
    if(cv === "p2") {
        conditions.push(function(item) {
            adultFee = item.adult_fee.replace('USD', '');
            return parseInt(adultFee) >= 51 && parseInt(adultFee) <= 100;
        });
    }
    if(cv === "p3") {
        conditions.push(function(item) {
            adultFee = item.adult_fee.replace('USD', '');
            return parseInt(adultFee) >= 101 && parseInt(adultFee) <= 200;
        });
    }
});

, тогда вот мой HTML образец флажок

<ul class="filters">
            <li class="filters__box">
                <p>出発地</p>
                <div class="filter__controller">
                    <input type="checkbox" id="pod-2" name="filter-pod" value="guam">
                    <label for="pod">グアム</label>
                </div>
                <div class="filter__controller">
                    <input type="checkbox" id="pod-1" name="filter-pod" value="hawaii">
                    <label for="pod">ハワイ </label>
                </div>
            </li>
            <li class="filters__box">
                <p>価格</p>
                <div class="filter__controller">
                    <input type="checkbox" id="price-1" name="filter-price" value="p1">
                    <label for="price">USD 0 ~ USD 50</label>
                </div>
                <div class="filter__controller">
                    <input type="checkbox" id="price-2" name="filter-price" value="p2">
                    <label for="price">USD 51 ~ USD 100</label>
                </div>
                <div class="filter__controller">
                    <input type="checkbox" id="price-3" name="filter-price" value="p3">
                    <label for="price">USD 101 ~ USD 200</label>
                </div>
                <div class="filter__controller">
                    <input type="checkbox" id="price-4" name="filter-price" value="p4">
                    <label for="price">USD  201 ~ USD 300</label>
                </div>
                <div class="filter__controller">
                    <input type="checkbox" id="price-5" name="filter-price" value="p5">
                    <label for="price">USD 301 ~</label>
                </div>
            </li>
</ul>

образец json файл для данных Модифицированный

[
  {
    "seller": "seller",
    "title": "title31",
    "point_of_departure": "グアム",
    "adult_fee": "USD 35.00",
    "image": "https://samplesite.com/upload/fl/500x750/2017/08/599e6b9221171.JPG",
    "reservation_link": "https://samplesite.com",
    "operating_company": "-",
    "guide": false,
    "japanese_support": false,
    "departure_time_zone": "午後",
    "required": "-",
    "pick_up": false,
    "meal": false,
    "child_participation": false,
    "one_person": "-",
    "credit_card_payment": true,
    "title_fixed": "ホテル受取・返却で便利Wi-Fiルーターレンタル",
    "image_fixed": "https://samplesite.com/08/599e6b9221171.JPG",
    "tag": 1
  },
  {
    "seller": "seller",
    "title": "title 4",
    "point_of_departure": "グアム",
    "adult_fee": "USD 135.00",
    "image": "https://samplesite.com/upload/fl/500x750/2017/08/599e6b9221171.JPG",
    "reservation_link": "https://samplesite.com",
    "operating_company": "-",
    "guide": false,
    "japanese_support": false,
    "departure_time_zone": "午後",
    "required": "-",
    "pick_up": false,
    "meal": false,
    "child_participation": false,
    "one_person": "-",
    "credit_card_payment": true,
    "title_fixed": "ホテル受取・返却で便利Wi-Fiルーターレンタル",
    "image_fixed": "https://samplesite.com/08/599e6b9221171.JPG",
    "tag": 2
  },
  {
    "seller": "seller",
    "title": "title 2",
    "point_of_departure": "グアム",
    "adult_fee": "USD 145.00",
    "image": "https://samplesite.com/upload/fl/500x750/2017/08/599e6b9221171.JPG",
    "reservation_link": "https://samplesite.com",
    "operating_company": "-",
    "guide": false,
    "japanese_support": false,
    "departure_time_zone": "午後",
    "required": "-",
    "pick_up": false,
    "meal": false,
    "child_participation": false,
    "one_person": "-",
    "credit_card_payment": true,
    "title_fixed": "ホテル受取・返却で便利Wi-Fiルーターレンタル",
    "image_fixed": "https://samplesite.com/08/599e6b9221171.JPG",
    "tag": 3
  },
  {
    "seller": "seller",
    "title": "title 3",
    "point_of_departure": "グアム",
    "adult_fee": "USD 312.00",
    "image": "https://samplesite.com/upload/fl/500x750/2017/08/599e6b9221171.JPG",
    "reservation_link": "https://samplesite.com",
    "operating_company": "-",
    "guide": false,
    "japanese_support": false,
    "departure_time_zone": "午後",
    "required": "-",
    "pick_up": false,
    "meal": false,
    "child_participation": false,
    "one_person": "-",
    "credit_card_payment": true,
    "title_fixed": "ホテル受取・返却で便利Wi-Fiルーターレンタル",
    "image_fixed": "https://samplesite.com/08/599e6b9221171.JPG",
    "tag": 3
  }
]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...