2016-11-11 7 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'を比較した結果に応じて '' a''を返します。 「0」(または「0」に強制するもの)を返すことは、項目が等しいとみなされることをソート関数に伝えることである。 – Phylogenesis

+0

申し訳ありませんが、もう少し説明できますか? – Silverburch

答えて

1

あなたの比較関数は、1または-1を返す必要がありますように見えます。何らかの形で2カ国が同じ名前を持っていない限り、実際に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に。すべての作品は今素晴らしいです。私はまだ若干混乱しています。なぜなら、私がアメリカに言ったとすれば、すべてがうまくいったからです。 – Silverburch

関連する問題