在排序前從複選框列表的一部分中排除項目

不能相信我被困在這！ JS小提琴https://jsfiddle.net/27a8qypq/顯示國家按字母順序從3個區域複選框選項的任意組合中出現。將來我會希望使用JS代碼中的指令來限制國家/地區列表的範圍。例如，即使勾選了所有3個複選框，我可能也希望代碼排除所有亞洲國家的出現，但保留顯示的其他國家/地區的字母順序。我嘗試使用.filter（）和.detach（）和.remove（），如以前的帖子中所建議的，但我無法獲得任何工作。在排序前從複選框列表的一部分中排除項目

任何人都可以提出如何我可以添加一個小的修改JS代碼，所以我可以排除1或2區域的國家被顯示？理想情況下，我不想重構HTML。謝謝

<label> 
<input type="checkbox" name="colorCheckbox" id="Europe" />Europe</label> 
<label> 
<input type="checkbox" name="colorCheckbox" id="Africa" />Africa</label> 
<label> 
<input type="checkbox" name="colorCheckbox" id="Asia" />Asia</label> 


<div class="mywrapper"> 

<label class="myEurope"> 
<input type="checkbox" value="Spain" />Spain</label> 
<label class="myEurope"> 
<input type="checkbox" value="Germany" />Germany</label> 
<label class="myEurope"> 
<input type="checkbox" value="Austria" />Austria</label> 

<label class="myAfrica"> 
<input type="checkbox" value="Nigeria" />Nigeria</label> 
<label class="myAfrica"> 
<input type="checkbox" value="Egypt" />Egypt</label> 
<label class="myAfrica"> 
<input type="checkbox" value="Kenya" />Kenya</label> 

<label class="myAsia"> 
    <input type="checkbox" value="Thailand" />Thailand</label> 
<label class="myAsia"> 
    <input type="checkbox" value="China" />China</label> 
<label class="myAsia"> 
    <input type="checkbox" value="Japan" />Japan</label> 

</div> 





function sortByText(a, b) { 
return $.trim($(a).text()) > $.trim($(b).text()); 
} 

var li = $(".mywrapper").children("label").detach().sort(sortByText) 
$(".mywrapper").append(li) 

$('input[type="checkbox"]').click(function() { 
$('.my' + $(this).attr("id")).slideToggle(200) 
}) 




.mywrapper { 
border: 1px solid blue; 
height: 200px; 
width: 300px; 
border: 1px solid blue; 
} 

.myEurope { 
display: none; 
} 

.myAfrica { 
display: none; 
} 

.myAsia { 
display: none; 
}

來源

2016-11-06 Silverburch

我不知道我是否完全理解你的問題，但我的目的是什麼。就在disabled屬性添加到您不希望在搜索結果所有複選框，以及與此修改您的JS（JSFiddle here，我已禁用西班牙爲例）：

$('input[type="checkbox"]').click(function() { 
    $('.my' + $(this).attr("id") + " > input:enabled").each(function() { 
     $(this).parent().toggle(); 
    }); 
});

來源

2016-11-06 18:48:59 soywod

對不起，我不夠清楚。我想要做的就是放棄整個地區，從而禁用其中的所有國家。我寧願不修改帶有禁用屬性的HTML。是否沒有修改jquery的方法，它在「.mywrapper」（starts var li = ...）中對列表進行排序，以便它可以排除「亞洲」。或者，是否有一個命令可以隱藏jquery最後一行的所有亞洲國家？謝謝 – Silverburch

明白了！我所需要做的就是在.slideToggle（0）之前添加.removeClass（類名）。在jQuery上。所以如果我想排除「myAsia」類中的國家我的jQuery調整如下：

function sortByText(a, b) { 
return $.trim($(a).text()) > $.trim($(b).text()); 
} 

var li = $(".mywrapper").children("label").detach().sort(sortByText) 
$(".mywrapper").append(li) 

$('input[type="checkbox"]').click(function() { 
$('.my' + $(this).attr("id")).removeClass("myAsia").slideToggle(200) 
})

來源

2016-11-07 16:19:38 Silverburch

在排序前從複選框列表的一部分中排除項目

回答

相關問題