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选择器，所以非常确定它会按预期工作。

jquery /我想通过使用for循环使我的代码更清晰

2 个答案: