2016-11-11 71 views
0

我有4个复选框,每个代表一个区域。点击其中的任何一个都会显示与该地区相关的3个国家/地区。点击区域复选框的组合显示所有相关的国家联机,但我想 国家复选框的列表总是按字母顺序显示。复选框列表的奇怪字母排序

奇怪的是,我的jquery似乎适用于3个区域复选框,但似乎没有为4工作。我只是不能看到我犯了什么愚蠢的错误,我开始怀疑更险恶的东西。这里是我的小提琴: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>

+2

您将只返回'1'或者'0'。排序需要一个正数,0或负数。 http://stackoverflow.com/questions/5503900/how-to-sort-an-array-of-objects-with-jquery-or-javascript – Gavin

+0

你需要返回'-1','0'或'1取决于比较'a'和'b'的结果。返回'0'(或强制为'0'的任何东西)是告诉排序函数,这些项目被认为是相等的。 – Phylogenesis

+0

对不起,但作为noob你能解释一点吗? – Silverburch

回答

1

看起来你比较函数应该返回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>

+0

谢谢大家,但特别感谢@epascarello的细节。现在所有作品都很棒。我仍然有点困惑,为什么,如果我说,S.America出来,一切都按照它应该的方式工作。 – Silverburch