次のようなチェックボックスを定義しました。
<label><input type="checkbox" id="Business Development box" onclick="boxclick(this,'skills','Business Development')" /> Business Development </label>
<label><input type="checkbox" id="Capacity Building box" onclick="boxclick(this,'skills','Capacity Building')" /> Capacity Building </label>
<label><input type="checkbox" id="Communications and Marketing box" onclick="boxclick(this,'skills','Communications and Marketing')" /> Communications and Marketing</label>
<label><input type="checkbox" id="Consulting box" onclick="boxclick(this,'skills','Documentary/Media')" /> Consulting</label>
<label><input type="checkbox" id="Documentary/Media box" onclick="boxclick(this,'skills','Documentary/Media')" /> Documentary/Media</label>
<label><input type="checkbox" id="Economic Development box" onclick="boxclick(this,'skills','Economic Development')" /> Economic Development</label>
<label><input type="checkbox" id="Entrepreneurship box" onclick="boxclick(this,'skills','Entrepreneurship')" /> Entrepreneurship</label>
<label><input type="checkbox" id="Event Planning box" onclick="boxclick(this,'skills','Event Planning')" /> Event Planning</label>
<label><input type="checkbox" id="Financial Management box" onclick="boxclick(this,'skills','Financial Management')" /> Financial Management</label>
チェックボックスは「カテゴリ」(スキル) とタイプ (コンサルティングなど) を受け取る boxclick をトリガーします。
boxclick は次のようになります。
function boxclick(box,category,type) {
if (box.checked) {
show(category, type);
} else {
hide(category, type);
}
}
boxclick
トリガーshow
、これは次のようになります
function show(category, type) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i][category].toUpperCase().indexOf(type.toUpperCase()) !== -1) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(type+" box").checked = true;
}
gmarkers
マップ内のすべてのマーカーが含まれています。 gmarkers[i][category]
個人が持っているすべてのスキルが含まれ、indexOf は「タイプ」(コンサルティングなど) がそのテキスト配列に含まれているかどうかを確認します。
最初にすべてのマーカーを自動的に非表示に設定し (別の便利なフィルタリング方法が思い浮かびません)、チェックボックスをオンにするたびに、そのスキルを持つすべての生徒が表示されます。
問題- 2 つのチェックボックスをクリックすると、すべてのマーカーの INTERSECTION ではなく UNION が表示されます。INTERSECTION のみが表示されるようにコードを変更するにはどうすればよいですか? 私はJavaScriptの経験がほとんどないので、これに頭を悩ませています。
一時的な実行例はhttp://dreaminginswahili.com/admin/mapv4.htmlにあります。私が犯した他の初心者の間違いについては、お気軽に修正してください。
また、これのアニメーション GIF があります: http://i.imgur.com/XdJTfDx.gif
乾杯!