Question

当选中或取消选中复选框时，我希望图标显示或消失。下面我将展示图标网址路径的外观。有什么方法可以做到吗？我一直在尝试将此代码添加到开关案例中，但我是js＆amp; amp;的初学者。 jquery，我不知道我做错了什么。

$('#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);
        }

    });

进入这个

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;
}

图标会像这样添加到代码中：

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'});

因此，选中或取消选中复选框时，图标会显示或消失。有可能吗？

Answer 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/

Answer 2

没有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');
})

在交换机案例中取消选中并选中复选框

2 个答案: