Я искал несколько дней, как создать это.
Вот как выглядит мульти-флажок ![enter image description here](https://i.stack.imgur.com/acSox.png)
Я знаю, как фильтровать массив, когда я щелкнул только один флажок, например, когда я щелкнул 0 - 50 долларов США, результатом будет весь элемент с adult_fee <50. Но я не знаю, как я могу добавить другое условие. Я пробовал $ .grep, но не могу заставить его работать. </p>
У меня есть такой массив, который хранится в переменной dataModified.
![enter image description here](https://i.stack.imgur.com/qQE3X.png)
Вот мой код
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
}
]