여러 개의 명명 된 선택기로 jQuery 함수 통합

Question

PHP의 스위치 함수와 비슷한 techniuqe를 찾고 있으므로 여러 명명 된 선택기에 대해 단일 함수를 사용할 수 있습니다. 선택자가 함수를 호출하는 기준에 따라 추가 코드가 추가됩니다.

나의 예제는 '저장하고 닫기'버튼에 따라 '저장'버튼을 사용하고, 후자는 아코디언을 닫기위한 추가 코드가 있습니다. 이 추가로 위와 같이

$('form[name=experienceForm]').submit(function(eve) { 

      eve.preventDefault(); 
      tinyMCE.triggerSave(); 

      var FormData = $(this).serialize(); 
      var requestThis = $(this); 
      var inputCom = $(this).find('input[name=inputCom]').val(); 
      var inputTitle = $(this).find('input[name=inputTitle]').val(); 

       $.ajax({ 
         type : 'POST', 
         url : '<?php echo site_url('resume/update'); ?>', 
         data: FormData, 
         dataType: "html", 
         context : $(this), 
         success : function(msg){ 
         requestThis.closest('.item').children('h3').children('a').text(inputCom+' : '+inputTitle); 

         if(msg != '') { 

         showNotice(msg); 
         } 

         }, 

         error: function(msg){ 
         alert('FAIL '+msg); 
         } 
        }); 


    }); 

내가 같은 작업을 수행 할 '저장 후 닫기'버튼을 싶습니다 : '저장'버튼을 클릭하면

은이 호출

$('input[name=experienceClose]').click(function(eve) { 

     eve.preventDefault(); 
     tinyMCE.triggerSave();   
     $(this).parent().parent().parent().parent().parent().parent().parent().parent().parent().accordion({active:"false"}); 
    }); 

Answer 1

버튼을 가정하면 name="experience*" 같은 패턴이이 같은 것을 할 수 일치 :

// just save the form 
function save(e) { 
    // all the stuff to do in either case 
} 

// just close it 
function close() { 
    // death by a thousand parents 
} 

// use "on" instead of older jQuery constructs 
$('form').on('click', '[name^="experience"]', function(e) { 
    switch(this.name) { 
     case 'experienceSave': 
      save.call(this,e); 
      break; 
     case 'experienceForm': 
      save.call(this,e); 
      close(); 
      break; 
     default: 
      throw 'Why am i here?'; 
    } 
}); 

무슨 일이야 :

1) 선택하는 ^= "경험으로 시작 속성 name 아무것도 가져가 ".

2) 이벤트 핸들러의 this은 클릭 한 요소입니다.

3) switch은 자바 스크립트에서 C와 유사한 언어입니다.

4) 이와 같은 오류가 발생하는 것이 좋습니다. default 사례가없고 선택기와 일치하는 마크 업을 추가 한 경우 기본값이 없으면 자동으로 실패합니다. 일어날 일이 없어지면 오류를 던져 디버깅이 쉬워집니다. 실제 사용자가 오류가 발생하는 것을 염려하면 생산을 시작할 때 자동으로 실패하기 전에 이메일 또는 무언가를 보내는 전역 window.onerror 처리기를 추가하십시오 :)

Answer 2

확실하지 않은 질문을하지만 스위치 기능을 할 것이라고 그들은 자바 스크립트에서 그들을 가지고 있습니까?

$('input[name=experienceClose], form[name=experienceForm]').on('click submit', function(e) { 
    e.preventDefault(); 
    tinyMCE.triggerSave(); 

    switch ($(this).attr('name')) { //based on the buttons name 
     case 'experienceClose' : //would be the name of the save and close button 
      //do something for save and close button 
     break; 
     case 'experienceForm' : //would be the name of the save only button 
      //do something for save button only 
     break; 
     default: 
      //do something on neither of the above 
    } 
}); 

반면에 버튼이 두 개인 경우 if/else 문이 더 적합합니다.