jquery/for 루프를 사용하여 코드를 더 명확하게 만들고 싶습니다.

Question

나는이 서비스의 초보자입니다. 코딩을하는 동안 질문이 있습니다. 하지만 내 문제를 해결하기위한 페이지를 찾을 수 없습니다 ...

for 루프를 사용하여 아래 코드를보다 명확하게 작성하고 싶습니다. 이 작업을 수행하려면 어떻게해야합니까?

$('.special1').on("click",'.chkbutton1',function() { 
    $('.special1').toggleClass('effect-oscar effect-oscar-second'); 
}); 
$('.special2').on("click",'.chkbutton2',function() { 
    $('.special2').toggleClass('effect-oscar effect-oscar-second'); 
}); 
$('.special3').on("click",'.chkbutton3',function() { 
    $('.special3').toggleClass('effect-oscar effect-oscar-second'); 
}); 

<<omitted>> 

$('.special11').on("click",'.chkbutton11',function() { 
    $('.special11').toggleClass('effect-oscar effect-oscar-second'); 
}); 

$('.special12').on("click",'.chkbutton12',function() { 
    $('.special12').toggleClass('effect-oscar effect-oscar-second'); 
});*/ 

Answer 1

for 루프를 사용할 필요가 없습니다. 당신은 단순히 다음과 같이 사용할 수 있습니다

$('[class^="chkbutton"]').on('click',function(){ 
    $(this).parent() //not sure if .special.. is parent, select the correct element 
    .toggleClass('effect-oscar effect-oscar-second'); 
}); 

내가 .parents('[class^="special"]') 적합하다고 생각. 이 같은 delegateTarget을 사용할 수 있습니다

---

또는 :

$('[class^="special"]').on("click",'[class^="chkbutton"]',function(e) { 
    $(e.delegateTarget).toggleClass('effect-oscar effect-oscar-second'); 
}); 

Answer 2

여기에 루프 사용할 수 있지만 다음과 같은 방법으로 작업을 수행 할 수 있습니다

$('[class^=special]').on("click",'class^=chkbutton',function() { 
    var classList = $(this).attr("class"); //get all the classes associated with button; one of then will be starting with chkbutton 
    var classArray = classList.split(" "); 
    $.each(classArray, function(i, val) { 
     if(val.indexOf("chkbutton") == 0) 
     { 
      var requiredClass = val; 
      var number = requiredClass.replace("chkbutton", ""); //grab the number 
      $('.special'+number).toggleClass('effect-oscar effect-oscar-second'); 
     } 
    } 
}); 

참고 : 위의 코드를 테스트 할 수 없었지만 유효한 jquery 선택기를 사용하여 예상대로 작동 할 것입니다.