이 코드를 단순화하거나 우아하게 만드시겠습니까?

Question

잘 작동하는 코드가 있지만 단순화/단축 될 수 있다고 생각합니다. 기본적으로 목록 항목을 클릭하고 ID를 가져온 다음 ID를 기준으로 요소를 표시/숨기기/제거합니다.

함수 또는 루프를 사용하여 이것을 단순화하는 방법에 대한 제안 사항은 무엇입니까? 이 같은

$("#btn_remove_event_type").click(function() { 
    var selectedId = $(".selected-type").attr("id"); 
    if (selectedId == "temperature_event") { 
     $("#poplist_temp").show(); 
     $(".temperature-params").hide(); 
     $("#temperature_event").remove(); 
    } else if (selectedId == "load_event") { 
     $("#poplist_load").show(); 
     $(".load-params").hide(); 
     $("#load_event").remove(); 
    } else if (selectedId == "price_event") { 
     $("#poplist_price").show(); 
     $(".price-params").hide(); 
     $("#price_event").remove(); 
    } else if (selectedId == "duty_event") { 
     $("#poplist_duty").show(); 
     $(".duty-params").hide(); 
     $("#duty_event").remove(); 
    } else { 
     $("#poplist_program").show(); 
     $(".program-params").hide(); 
     $("#program_event").remove(); 
    } 
}); 

Answer 1

결국 클래스를 ID로 변경하고 순서를 변경하여 결국 if 문을 필요로하지 않는이 솔루션으로 끝났습니다.

$("#btn_remove_event_type").click(function() { 

    var selectedId = $(".selected-type").attr("id").split("_"); 
    $("#" + selectedId[0] + "_pop").show(); 
    $("#" + selectedId[0] + "_params").hide(); 
    $("#" + selectedId[0] + "_event").remove(); 

}); 

Answer 2

뭔가 :

$("#btn_remove_event_type").click(function() { 
    var selectedId = $(".selected-type").attr("id"); 
    switch(selectedId){ 
     case "temperature_event": 
     $("#poplist_temp").show(); 
     $(".temperature-params").hide(); 
     $("#temperature_event").remove(); 
     break; 

     case "load_event": 
     $("#poplist_load").show(); 
     $(".load-params").hide(); 
     $("#load_event").remove(); 
     break; 

     case "price_event": 
     $("#poplist_price").show(); 
     $(".price-params").hide(); 
     $("#price_event").remove(); 
     break; 

     case "duty_event"): 
     $("#poplist_duty").show(); 
     $(".duty-params").hide(); 
     $("#duty_event").remove(); 
     break; 

     default: 
     $("#poplist_program").show(); 
     $(".program-params").hide(); 
     $("#program_event").remove(); 
    } 
}); 

또는 더 나은 :

$("#btn_remove_event_type").click(function() { 
    // Get id and split on "_" 
    var selectedId = $(".selected-type").attr("id").split("_"); 
    // Set array of accepted input 
    var options = ["temperature","load","price","duty"]; 
    // Handle default 
    if(options.indexOf(selectedId[0]) == -1){ 
     selectedId = ["program"]; 
    } 

    $("#poplist_" + selectedId[0]).show(); 
    $("."+selectedId[0] + "-params").hide(); 
    $("#"+selectedId[0] + "_event").remove(); 
}); 

Answer 3

는 단순 위해서 나는 버튼의 ID를 변경 것이라고는 하나 개의 단어 (tempeature, 부하, 가격 클릭 ,의무). 당신은 당신의 반동적 인 id/클래스의 이름을 바꿔야 만 할 것입니다. 또한 일관성을 유지하기 위해 이름을 뒤집어 썼습니다.

당신의 스타일에 맞도록 전환 할 수 있습니다. $ ("#"+ id + "- params")와 같은 선택자를 사용하고 있습니다. hide();

$("#btn_remove_event_type").click(function() { 
     var selectedId = $(".selected-type").attr("id"); 
     var nonDefault = ["temperature","load","price","duty"]; 
     if(nonDefault.indexOf(selectedId) > -1){ 
      $("#poplist_"+selectedId).show(); 
      $(".params-"+selectedId).hide(); 
      $("#event_"+selectedId).remove();   
     } else { 
      $("#poplist_program").show(); 
      $(".params-program").hide(); 
      $("#event_program").remove(); 
     } 
}); 

Answer 4

다른 요소 이름과 일치하는 ID 이름에 의존하지 않으려는 경우 개체를지도로 사용하여 작업을 지정할 수 있습니다.

//using a map lets you easily add or remove cases without duplicating code, and doesn't require you to use standardized names for your elements and events. 
    var action_map = {temperature_event:{show:"#poplist_temp", 
             hide:".temperature-params", 
             remove:"#temperature_event" 
             }, 
         load_event:{show:"#poplist_load", 
            hide:".load-params", 
            remove:"#load_event", 
           }, 
         price_event:{show:"#poplist_price", 
            hide:".price-params", 
            remove:"#price_event", 
            }, 
         duty_event:{show:"#poplist_duty", 
            hide:".duty-params", 
            remove:"#duty_event" 
           }, 
         default_event:{show:"#poplist_program", 
            hide:".program-params", 
            remove:"#duty_event", 
            } 
        }; 

    $("#btn_remove_event_type").click(function() { 
     var selectedId = $(".selected-type").attr("id"); 
     if (!action_map[selectedId]) 
      selectedId = "default_event"; 

      $(action_map[selectedId].show).show(); 
      $(action_map[selectedId].hide).hide(); 
      $(action_map[selectedId].remove).remove(); 
     } 
    }); 

Answer 5

개인적으로 볼 수있는 가장 깨끗하고 구성 가능한 방법은지도를 사용하고 메소드를 반복하는 것입니다. 다른 매핑이 다른 메소드를 가질 수 있기 때문에 이것은 일반적입니다. 이것을 더 확장하여 매핑을 구성 할 수있는 메소드, 즉 addNewType ([{methodName : selector} 등])을 가질 수 있습니다.

var configuration = { 
     temperature_event: { 
      show: "#poplist_temp", 
      hide: ".temperature-params", 
      remove: "#temperature_event" 
     }, 
     load_event: { 
      show: "#poplist_load", 
      hide: ".load-params", 
      remove: "#load_event" 
     } 
     // etc etc. 
    }; 

    $("#btn_remove_event_type").click(function() { 
     var fn, selector, typeConfig = $(".selected-type").attr("id"); 
     for (fn in typeConfig) 
      $(typeConfig[fn])[fn](); 
     }); 

    });