2016-04-29 11 views
1

チェックボックスをオンまたはオフにすると、アイコンが表示されたり消えたりします。以下は、アイコンのURLのパスがどのように見えるかを示しています。私はそれを行うことができる方法はありますか?私はスイッチのケースにこのコードを追加しようとしていますが、私はjs & jqueryの初心者です。私は何が間違っているのか分かりません。このスイッチケースのチェックボックスをオフにしてチェックボックスをオフにします。

switch (feature.properties.status) { 
     case 0: 
      icon = greenIcon; break; 
     case 1: 
     case 11: 
     case 12: 
      icon = yellowIcon; break; 
     case 2: 
     case 21:  
     case 22:  
      icon = redIcon; break; 
     case 5: 
     default: 
      icon = blueIcon; break; 
} 

$('#someId').change(function() { 

     if(this.checked) { 
      $(icon = greenIcon).show(1); 
     } 
     else { 
      $(icon = greenIcon).hide(1); 
     } 

    }); 

    $('#someId2').click(function() { 

     if(this.checked) { 
      $(icon = yellowIcon).show(1); 
     } 
     else { 
      $(icon = yellowIcon).hide(1); 
     } 

    }); 

    $('#someId3').click(function() { 

     if(this.checked) { 
      $(icon = redIcon).show(1); 
     } 
     else { 
      $(icon = redIcon).hide(1); 
     } 

    }); 

    $('#someId4').click(function() { 

     if(this.checked) { 
      $(icon = blueIcon).show(1); 
     } 
     else { 
      $(icon = blueIcon).hide(1); 
     } 

    }); 

アイコンは、このようなコードに追加されます。チェックボックスがオンまたはオフされたときに

var greenIcon = new LeafIcon({iconUrl: L.Icon.Default.imagePath + 'marker-icon-ok.png'}); 
var redIcon = new LeafIcon({iconUrl: L.Icon.Default.imagePath + 'marker-icon-err.png'}); 
var yellowIcon = new LeafIcon({iconUrl: L.Icon.Default.imagePath + 'marker-icon-warn.png'}); 
var blueIcon = new LeafIcon({iconUrl: L.Icon.Default.imagePath + 'marker-icon-sleep.png'}); 

ので、アイコンが表示されたりdissappearでしょう。出来ますか?

+0

(私はリーフレットなどに精通していないよので)私はあなたがチェックボックスが変更 'で確認されているかどうかを確認したい正しく理解していれば() 'のチェックボックスにチェックを入れますか?スイッチを使用して表示するアイコンを決定したいとしますか? – Jorrex

+0

@Jorrexこのような遅い返事をおかけして申し訳ありません。私はチェックボックスを使用して地図上にアイコンを隠して表示しようとしています。そのアイコンは、htmlやcssではなく、jsにあるので、私にとってはかなり難しいです。私はスイッチケースを使用してそれらに入ることを試みているが、それは役に立たない...私はまたアイデアを持っている。私はスイッチのケース内にdivを作成しようとするつもりですが、私の試行はまだ失敗しています。私は本当に私を助けていないすべての答えとして何をすべきか分かりません。 – Sazaj

答えて

1

これは、あなたの質問に答えていますが、クラスを切り替えることができれば、非常にわからないときは入力変化css/sassに表示されているものを処理します。

簡単な例:

$('.checkboxInput').change(function(){ 
    $(this).parent().toggleClass('showIcon'); 
    alert('Is the checkbox checked? This is ' + $(this).prop('checked')); 
}); 

https://jsfiddle.net/Airrudi/ffvmgebe/1/

0

switch文はありませんか?データ属性でそれを行うと、それははるかに簡単に(私の意見では)後で物事を追加するようになります

https://jsfiddle.net/stevenkaspar/v43egwdx/1/

<input data-icon-target='#i_1' data-has-icon='true' checked type='checkbox'/> 
<span class='icon' id='i_1'>icon 1</span> 

$('[data-has-icon="true"]').click(function(event){ 
    var target_id = $(this).data('iconTarget'); 
    $(target_id).toggleClass('hidden'); 
}) 
関連する問題