减少冗余码

Question

我有一个非常简单的功能，可以从html元素中找到、切换和删除类。问题是，我发现我自己用不同的名称类重复相同的代码。我基本上写了9遍同样的方法。我知道，就是你一遍又一遍地写同样的东西，有一种更有效的方法。所以我只想看看怎样才能让我的代码更有效。

我附加了代码的一部分，我发现自己重复了很多次。我有一些尝试过的想法，但我只保存了两行代码。

// SECTION 5

$("body").on("tap", ".state1, .display-state1", function showState1() {
          $(".show-overlay").toggleClass("display-state1");
          $(".show-overlay").removeClass("display-state2");
          $(".show-overlay").removeClass("display-state3");
    });

$("body").on("tap", ".state2, .display-state2", function showState2() {
          $(".show-overlay").toggleClass("display-state2");
          $(".show-overlay").removeClass("display-state1");
          $(".show-overlay").removeClass("display-state3");
    });

$("body").on("tap", ".state3, .display-state3", function showState3() {
          $(".show-overlay").toggleClass("display-state3");
          $(".show-overlay").removeClass("display-state1");
          $(".show-overlay").removeClass("display-state2");
    });

// SECTION 8

$("body").on("tap", ".state-1, .display-state-1", function showSection8State1() {
          $(".show-overlay-big").toggleClass("display-state-1");
          $(".state-1-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-2, .display-state-2", function showSection8State2() {
          $(".show-overlay-big").toggleClass("display-state-2");
          $(".state-2-pdfs").children().toggleClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-3, .display-state-3", function showSection8State3() {
          $(".show-overlay-big").toggleClass("display-state-3");
          $(".state-3-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-4, .display-state-4", function showSection8State4() {
          $(".show-overlay-big").toggleClass("display-state-4");
          $(".state-4-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-5, .display-state-5", function showSection8State5() {
          $(".show-overlay-big").toggleClass("display-state-5");
          $(".state-5-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-6, .display-state-6", function showSection8State6() {
          $(".show-overlay-big").toggleClass("display-state-6");
          $(".state-6-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-7, .display-state-7", function showSection8State7() {
          $(".show-overlay-big").toggleClass("display-state-7");
          $(".state-7-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-8, .display-state-8", function showSection8State8() {
          $(".show-overlay-big").toggleClass("display-state-8");
          $(".state-8-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-9, .display-state-9", function showSection8State9() {
          $(".show-overlay-big").toggleClass("display-state-9");
          $(".state-9-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-1");
    });

Answer 1

假设您有格式state-#-pdfs类，其中#在1,9范围内。如果您想要影响这些类的子集，比方说在range 5、9中，您可以使用一个简单的for循环来迭代：

var i;
for( i=5; i<=9; i++ )
{
    $("state-"+i+"-pdfs").children().removeClass("display-pdfs");
}

如果您的目标是永远不要针对这些类的动态子集，而是始终以相同的类为目标，那么最好修改HTML并将相同的类添加到所有元素中。这样，一个选择器就会瞄准你想要他们瞄准的任何东西。在一天结束时，这取决于你的需要。

Answer 2

以下是一些让你开始的方法：

$("body").on("tap", ".state1, .display-state1", function showState1() {
    $(".show-overlay").toggleClass("display-state1").removeClass("display-state2 display-state3");
});

和

$("body").on("tap", ".state-1, .display-state-1", function showSection8State1() {
    $(".show-overlay-big").toggleClass("display-state-1");
    $(".state-1-pdfs,.state-2-pdfs,.state-3-pdfs,.state-4-pdfs,.state-5-pdfs,.state-6-pdfs,.state-7-pdfs,.state-8-pdfs,.state-9-pdfs").children().removeClass("display-pdfs");
    $(".show-overlay-big").removeClass("display-state-2 display-state-3 display-state-4 display-state-5 display-state-6 display-state-7 display-state-8 display-state-9");
});

但这一切看上去有点不对劲。我毫不怀疑有一种更好的方法来处理您正在做的事情，但是没有关联的HTML是不可能知道的。

Answer 3

你可以这样做：https://jsfiddle.net/L2fqbr0f/

//variables of SECTION 5
var classes5 = ["display-state1", "display-state2", "display-state3"];

function showState(class_Name){
    for (i = 0; i < classes5.length; i++) {  
        if (classes5[i] == class_Name)
            $(".show-overlay").toggleClass(classes5[i]);
        else
            $(".show-overlay").removeClass(classes5[i]);
    }
}


//variables of SECTION 8
var stateElements8 = [".state-1-pdfs", ".state-2-pdfs", ".state-3-pdfs", ".state-4-pdfs", ".state-5-pdfs", ".state-6-pdfs", ".state-7-pdfs", ".state-8-pdfs", ".state-9-pdfs"];
var showOverlayBigElement8 = $(".show-overlay-big");
var showOverlayBigClasses8 = ["display-state-1", "display-state-2", "display-state-3", "display-state-4", "display-state-5", "display-state-6", "display-state-7", "display-state-8", "display-state-9"];

function showSection8State(showOverlayBigClassesParam, stateElement){

    //Changing showOverlayBigElement8 classes
    for (i = 0; i < showOverlayBigClasses8.length; i++) {  
        if (showOverlayBigClasses8[i] == showOverlayBigClassesParam)
            showOverlayBigElement8.toggleClass(showOverlayBigClasses8[i]);
        else
            showOverlayBigElement8.removeClass(showOverlayBigClasses8[i]);
    }

    //Changing stateElements
    for (i = 0; i < stateElements8.length; i++) {  
        if (stateElements8[i] == stateElement)
            $(""+stateElement).children().toggleClass("display-pdfs");
        else
            $(""+stateElement).children().removeClass("display-pdfs");
    }

}


// SECTION 5
$("body").on("tap", ".state1, .display-state1", showState("display-state1"));
$("body").on("tap", ".state2, .display-state2", showState("display-state2"));
$("body").on("tap", ".state3, .display-state3", showState("display-state3"));


// SECTION 8

$("body").on("tap", ".state-1, .display-state-1", showSection8State("display-state-1", ".state-1-pdfs"));
//...
$("body").on("tap", ".state-1, .display-state-1", showSection8State("display-state-9", ".state-9-pdfs"));