我有 4 个复选框,每个复选框代表一个区域。单击其中任意一个会显示与该地区相关的 3 个国家/地区。单击区域复选框的组合会显示所有相关的国家/地区,但我想要 国家/地区复选框列表始终按字母顺序显示。
奇怪的是,我的 jquery 似乎适用于 3 个区域复选框,但似乎不适用于 4 个区域复选框。我只是看不出我犯了什么愚蠢的错误,并且开始怀疑有更险恶的事情。这是我的 fiddle :https://jsfiddle.net/m5v7v6kv/
感谢您的帮助。
function sortByText(a, b) {
return $.trim($(a).text()) > $.trim($(b).text());
}
var li = $(".CountryWrapper").children("label").detach().sort(sortByText)
$(".CountryWrapper").append(li)
$('input[type="checkbox"]').click(function() {
$('.my' + $(this).attr("id")).slideToggle(200)
})
.CountryWrapper {
border: 1px solid blue;
height: 150px;
width: 480px;
border: 1px solid blue;
}
.myEuropeCountries {
display: none;
}
.myNAMCountries {
display: none;
}
.mySAMCountries {
display: none;
}
.myAfricaMECountries {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" id="EuropeCountries" />Europe</label>
<label><input type="checkbox" id="NAMCountries" />North America</label>
<label><input type="checkbox" id="SAMCountries" />South America</label>
<label><input type="checkbox" id="AfricaMECountries" />Africa and Middle East</label>
<div class="CountryWrapper">
<br>
<label class="myEuropeCountries"><input type="checkbox" value="Spain" />Spain</label>
<label class="myEuropeCountries"><input type="checkbox" value="Germany" />Germany</label>
<label class="myEuropeCountries"><input type="checkbox" value="Austria" />Austria</label>
<label class="myNAMCountries"><input type="checkbox" value="USA" />USA</label>
<label class="myNAMCountries"><input type="checkbox" value="Mexico" />Mexico</label>
<label class="myNAMCountries"><input type="checkbox" value="Canada" />Canada</label>
<label class="mySAMCountries"><input type="checkbox" value="Brazil" />Brazil</label>
<label class="mySAMCountries"><input type="checkbox" value="Argentina" />Argentina</label>
<label class="mySAMCountries"><input type="checkbox" value="Chile" />Chile</label>
<label class="myAfricaMECountries"><input type="checkbox" value="SouthAfrica" />South Africa</label>
<label class="myAfricaMECountries"><input type="checkbox" value="Egypt" />Egypt</label>
<label class="myAfricaMECountries"><input type="checkbox" value="SaudiArabia" />Saudi Arabia</label>
</div>
最佳答案
看起来您的比较函数应该返回 1 或 -1。在您的情况下,确实没有理由返回 0
,除非两个国家/地区具有相同的名称。
return $.trim($(a).text()) > $.trim($(b).text()) ? 1 : -1;
<小时/>
function sortByText(a, b) {
return $.trim($(a).text()) > $.trim($(b).text()) ? 1 : -1;
}
var li = $(".CountryWrapper").children("label").detach().sort(sortByText)
$(".CountryWrapper").append(li)
$('input[type="checkbox"]').click(function() {
$('.my' + $(this).attr("id")).slideToggle(200)
})
.CountryWrapper {
border: 1px solid blue;
height: 150px;
width: 480px;
border: 1px solid blue;
}
.myEuropeCountries {
display: none;
}
.myNAMCountries {
display: none;
}
.mySAMCountries {
display: none;
}
.myAfricaMECountries {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="EuropeCountries" />Europe</label>
<label>
<input type="checkbox" id="NAMCountries" />North America</label>
<label>
<input type="checkbox" id="SAMCountries" />South America</label>
<label>
<input type="checkbox" id="AfricaMECountries" />Africa and Middle East</label>
<!-------------------------------------------------------------------->
<div class="CountryWrapper">
<br>
<label class="myEuropeCountries">
<input type="checkbox" value="Spain" />Spain</label>
<label class="myEuropeCountries">
<input type="checkbox" value="Germany" />Germany</label>
<label class="myEuropeCountries">
<input type="checkbox" value="Austria" />Austria</label>
<label class="myNAMCountries">
<input type="checkbox" value="USA" />USA</label>
<label class="myNAMCountries">
<input type="checkbox" value="Mexico" />Mexico</label>
<label class="myNAMCountries">
<input type="checkbox" value="Canada" />Canada</label>
<label class="mySAMCountries">
<input type="checkbox" value="Brazil" />Brazil</label>
<label class="mySAMCountries">
<input type="checkbox" value="Argentina" />Argentina</label>
<label class="mySAMCountries">
<input type="checkbox" value="Chile" />Chile</label>
<label class="myAfricaMECountries">
<input type="checkbox" value="SouthAfrica" />South Africa</label>
<label class="myAfricaMECountries">
<input type="checkbox" value="Egypt" />Egypt</label>
<label class="myAfricaMECountries">
<input type="checkbox" value="SaudiArabia" />Saudi Arabia</label>
</div>
关于javascript - 复选框列表的奇怪字母排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40552069/