前端script怎么简写下拉框页面

Question

前端script怎么简写下拉框页面

<script>
    $(document).ready(function(){
        if (location.href.indexOf("aaa.html") > 0){
            $('#aaa').parent('ul').removeClasee(...);     # 重复1
            $('#aaa').parent('ul').addClass(...);             # 重复2
            $('#aaa').parent('ul').slideDown(100).chilldren('li');   # 重复3
            $('#aaa').addClass('active');                      # 重复4
            $('#aaa').attr(...);                                       # 重复5
        }
        else if (location.href.indexOf("bbb.html") > 0){
            $('#bbb')...             # 重复1
            $('#bbb')...             # 重复2
            $('#bbb')...             # 重复3
            ...                            # 重复4
                                          # 重复5
        }
        else if (){
        # 重复1,2,3,4,5
        }
        else if(location.href.indexOf("kkk.html") > 0 || location.href.indexOf("lll.html") > 0){
        # 重复1,2,3,4,5
        }
        .......
        }
</script>

我想简化上述代码，不想一直用if else大段大段的往后添加，想把这些大量的重复代码重构一下，但是不会前端，大佬们能告知下有什么方案么？非常感谢，最好写下demo，采纳给C币，感谢感谢！！

---

现在我单写了函数，然后调用。现在有个问题， 下拉页面只能点一次就不能再点了，不知道哪的问题？

<script>
    $(document).ready(function(){

        function dolt(value){
            $('#'+value)...    # 重复1
            $('#'+value)...    # 重复2
            $('#'+value)...    # 重复3
            $('#'+value)...    # 重复4
            $('#'+value)...    # 重复5
            }

        if (location.href.indexOf("aaa.html") > 0){
            dolt(aaa);
            }
        else if  (location.href.indexOf("bbb.html") > 0){
            dolt(aaa);
            }
            ...
    });
</script>

Answer 1

可以用遍历的方法，但是ready你要确保你的项目在跳连接的时候是重新加载dom的，像vue搭建的项目估计要刷新才会加载ready哦

var hrefArr = ['aaa.html', 'bbb.html', 'ccc.html'];
    $(document).ready(function () {
        hrefArr.forEach((href, i) => {
            if (location.href.indexOf(href)) {
                // jq 可以链式调用，不需要一句一句的写
                 // 你的jquery代码
                return
            }
        })
    });