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

あなたがここにforループを使用することはできませんが、あなたは次のようにそれを行うことができます。

$('[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セレクタを使用していますので、期待通りに動作することが確実です。