Question

自从我研究网络地图以来已经过了一个月。我目前正在练习jQuery`和GeoServer。

有没有办法简化它？我可以在这里使用switch吗？

bridge.on('change:visible', function(){
    if(bridge.getVisible() == true) {
        $('#bridge').show();                        
    } else {
        $('#bridge').hide();
    }
});

road.on('change:visible', function(){
    if(road.getVisible() == true) {
        $('#road').show();                      
    } else {
        $('#road').hide();
    }
});

rail.on('change:visible', function(){
    if(rail.getVisible() == true) {
        $('#rail').show();                      
    } else {
        $('#rail').hide();
    }
});

Answer 1

拥抱功能！

function toggleVisible(thing, selector){
  selector.toggle(thing.getVisible());
}

 bridge.on('change:visible', toggleVisible.bind(this, bridge, $('#bridge'));
 road.on('change:visible', toggleVisible.bind(this, road, $('#road'));
 rail.on('change:visible', toggleVisible.bind(this, rail, $('#rail'));

Answer 2

问题不在于需要简化的if-else语句，而是repetition。将重复的代码包装在函数中，将差异分解为参数，并将其调用三次：

function toggleWithVisibility(source, target) {
    source.on('change:visible', function(){
        if (source.getVisible() == true) {
            target.show();                        
        } else {
            target.hide();
        }
    });
}
toggleWithVisibility(bridge, $('#bridge'));
toggleWithVisibility(road, $('#road'));
toggleWithVisibility(rail, $('#rail'));

您还可以通过省略多余的== true并使用带有参数的toggle来简化函数代码：

function toggleWithVisibility(source, target) {
    source.on('change:visible', function(){
        target.toggle(source.getVisible());
    });
}

您还没有告诉我们您的三个变量是如何定义的，很可能您也可以简化这些变量，例如：同时选择source和target并从循环中调用该函数。

Answer 3

您可以使用单jQuery()次来电，.on()和条件操作符.filter()

$("#bridge, #road, #rail").on("change:visible", function() {
  $(this).toggle(!$(this).getVisible());
});

Answer 4

var $list= ["bridge", "road","rail"];


$list.forEach(function(v) {
   if($('#'+v').is(":visible")) {
            $('#'+v').show();                      
        } else {
            $('#'+v').hide();
        }
    }
});

希望这对你有所帮助。

Answer 5

我还没有测试过它！

    bridge.on('change:visible', function(){
        $('#bridge').toggle();
    });

    road.on('change:visible', function(){
         $('#road').toggle();
    });

    rail.on('change:visible', function(){
         $('#rail').toggle();
    });

是否有更简单的方法来执行if else语句？

5 个答案: