if else文を実行する簡単な方法はありますか？

Question

私はWebマッピングを勉強してから1ヶ月です。私は現在、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

問題は単純化が必要な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()); 
    }); 
} 

あなたは3つの変数がどのように定義されているかをまだ見せていないので、それらを単純化する可能性もあります。 sourceとtargetを一緒に選択し、ループから関数を呼び出すことによって

Answer 2

あなたは、単一のjQuery()呼び出し、.on()、および条件演算子を使用することができ、

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

.filter()

Answer 3

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


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

・ホープこのヘルプます。

Answer 4

機能を利用してください！

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 5

私はそれをテストしていません！

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

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

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