1

次のようなチェックボックスを定義しました。

ここに画像の説明を入力

<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

乾杯!

4

0 に答える 0