减少冗余代码

Question

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

我附上了我的代码，我发现自己重复了很多。我尝试了一些想法，但我只保存了2行代码。

// 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

这里有一些让你入门：

$("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 2

假设您有格式state-#-pdfs的类，其中#在[1,9]范围内。如果你想影响这些类的一个子集，让我们说在范围[5,9]中，你可以用一个简单的for循环进行迭代：

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

如果您的目标是永远不会定位这些类的动态子集，而是总是定位相同的类，无论如何，那么修改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"));

Answer 4

这是一个开始，你可以进一步减少这个，但应该给你一个想法....我没有测试过这个，但应该关闭。

$("body").on("tap", function(){
    var x = $(this).class();
    switch(x) {
        //9,8,7
        case "state-9":
        case "display-state-9":
        case "state-8":
        case "display-state-8":
        case "state-7":
        case "display-state-7":
            showSectionToggle();
        break;
        //6,5,4
        case "state-6":
        case "display-state-6":
        case "state-5":
        case "display-state-5":
        case "state-4":
        case "display-state-4":
            showSectionRemove();
        break;
         //3
        case "state-3":
        case "display-state-3":
            showState3();
            showSectionRemove();
        break;
        //2
        case "state-2":
        case "display-state-2":
            showState2();
            showSectionRemove();
        break;
        //1
        case "state-1":
        case "display-state-1":
            showState1();
            showSectionRemove();

        break;
        default:
                return;
    } 
});
function showSectionToggle() {
    for(i=1; i<9; i++){
        $(".state-"+i+"-pdfs").children().toggleClass("display-pdfs");
        $(".show-overlay-big").toggleClass("display-state-"+i);
    }
};
function showSectionRemove() {
    for(i=1; i<9; i++){
        $(".state-"+i+"-pdfs").children().removeClass("display-pdfs");
        $(".show-overlay-big").removeClass("display-state-"+i);
    }
}
function showState1(){
    $(".show-overlay").toggleClass("display-state1");
    $(".show-overlay").removeClass("display-state2");
    $(".show-overlay").removeClass("display-state3");
}
function showState2(){
    $(".show-overlay").toggleClass("display-state2");
    $(".show-overlay").removeClass("display-state1");
    $(".show-overlay").removeClass("display-state3");
}
function showState3(){
    $(".show-overlay").toggleClass("display-state3");
    $(".show-overlay").removeClass("display-state1");
    $(".show-overlay").removeClass("display-state2");
}