0
如何實現使用複選框多個過濾器最好使用jQuery？如何使用複選框實現多個過濾器？
我有代表級別用戶已經完成的困難自己的數據屬性的多個div元素。
我想創建一個使用複選框的過濾器，以便當他們檢查一個特定難度的框完成時，該難度被過濾掉（隱藏）。如果用戶想要過濾多重困難，那麼這些困難也會被過濾掉。如果用戶取消選中該框，那麼顯然它會重新出現。
這裏是包含數據屬性div元素。設置爲true的數據屬性是已完成的數據屬性。例如。 （數據正常= true意味着正常難度完成）
<div class="map-col-container col-xs-12 col-sm-6 col-md-4" data-mapname="Level One" data-completed="2" data-easy="true" data-normal="false" data-hard="true" data-expert="false">
<div class="map-col">
<!--Content Here-->
</div>
</div>
<div class="map-col-container col-xs-12 col-sm-6 col-md-4" data-mapname="Level Two" data-completed="4" data-easy="true" data-normal="true" data-hard="true" data-expert="true">
<div class="map-col">
<!--Content Here-->
</div>
</div>
<div class="map-col-container col-xs-12 col-sm-6 col-md-4" data-mapname="Level Three" data-completed="1" data-easy="true" data-normal="false" data-hard="false" data-expert="false">
<div class="map-col">
<!--Content Here-->
</div>
</div>
在這個例子中，如果我檢查專家，然後第二層次應成爲隱藏。如果我還檢查硬，那麼這兩個一級，二級應該被隱藏。
這裏是我的複選框
<div class="checkbox">
<label><input type="checkbox" id="hideEasyChkBox">Hide Easy</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="hideNormalChkBox">Hide Normal</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="hideHardChkBox">Hide Hard</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="hideExpertChkBox">Expert</label>
</div>
我沒有嘗試這種使用但如果一個盒子成了儘管其他框選中每個難度一個布爾值被檢查，這將取消隱藏所有級別忽略了一個事實其他框仍檢查。
如果有不清楚的地方，請詢問。謝謝
編輯：這是我使用的方法，但這不起作用，因爲當我取消選中其中一個複選框時，div的重置並顯示所有級別，忽略其他框仍然被檢查的事實。
var hideCompleted = false;
var hideEasy = false;
var hideNormal = false;
var hideHard = false;
var hideExpert = false;
function mapCompletionFilter(filterBy){
var $wrapper = $('.map-container');
if(filterBy == "hideCompleted" && !hideCompleted){
//$wrapper.find(".map-col-container[data-completed*=4]").hide();
$wrapper.find(".map-col-container").filter('[data-completed="4"]').hide();
hideCompleted = true;
}
else if(filterBy == "hideCompleted" && hideCompleted){
$wrapper.find(".map-col-container[data-completed*=4]").show();
hideCompleted = false;
}
if(filterBy == "hideEasy" && !hideEasy){
//$wrapper.find(".map-col-container[data-completed*=4]").hide();
$wrapper.find(".map-col-container").filter('[data-easy="true"]').hide();
hideEasy = true;
}
else if(filterBy == "hideEasy" && hideEasy){
$wrapper.find(".map-col-container").filter('[data-easy="true"]').show();
hideEasy = false;
}
if(filterBy == "hideNormal" && !hideNormal){
//$wrapper.find(".map-col-container[data-completed*=4]").hide();
$wrapper.find(".map-col-container").filter('[data-normal*="true"]').hide();
hideNormal = true;
}
else if(filterBy == "hideNormal" && hideNormal){
$wrapper.find(".map-col-container").filter('[data-normal*="true"]').show();
hideNormal = false;
}
if(filterBy == "hideHard" && !hideHard){
//$wrapper.find(".map-col-container[data-completed*=4]").hide();
$wrapper.find(".map-col-container").filter('[data-hard*="true"]').hide();
hideHard = true;
}
else if(filterBy == "hideHard" && hideHard){
$wrapper.find(".map-col-container").filter('[data-hard*="true"]').show();
hideHard = false;
}
if(filterBy == "hideExpert" && !hideExpert){
//$wrapper.find(".map-col-container[data-completed*=4]").hide();
$wrapper.find(".map-col-container").filter('[data-expert*="true"]').hide();
hideExpert = true;
}
else if(filterBy == "hideExpert" && hideExpert){
$wrapper.find(".map-col-container").filter('[data-expert*="true"]').show();
hideExpert = false;
}
}
按鈕
$("#hideAllCompletedChkBox").click(function(){
mapCompletionFilter("hideCompleted");
});
$("#hideEasyChkBox").click(function(){
mapCompletionFilter("hideEasy");
});
$("#hideNormalChkBox").click(function(){
mapCompletionFilter("hideNormal");
});
$("#hideHardChkBox").click(function(){
mapCompletionFilter("hideHard");
});
$("#hideExpertChkBox").click(function(){
mapCompletionFilter("hideExpert");
});
我遇到的主要問題是，當我使用多個複選框隱藏每一個人的困難，由此，如果這些複選框之一是取消選中，所有的div成爲取消隱藏。
請張貼您的JavaScript代碼 –
請仔細閱讀[問]。重要短語：「搜索和研究」和「解釋......阻止你自己解決它的任何困難」。 –
[按數據屬性選擇元素]（http://stackoverflow.com/questions/2487747/selecting-element-by-data-attribute）。 [隱藏選定的元素]（http://api.jquery.com/hide/）。 –