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

前端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>

5个回答

可以用遍历的方法,但是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
            }
        })
    });
qq_36512295
痴迷、淡然~ 棒哦
9 个月之前 回复
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery-1.11.0.js" ></script>
    </head>
    <body>
        <p id="aaa">我最帅</p>
        <script>
        $(document).ready(function(){
            var url = window.location.pathname;
             url = url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
            doIt(url);

      });
      function doIt(value){
        console.log(value);
          $('#'+value).css("color","red");                                # 重复5
      }
</script>
    </body>
</html>

这是我自己的理解。但是呢,我想,切换了不同的HTML页面怎么公用一套js呢。这种操作我还是没有见过。
最终把js抽象出来成一个文件,每个html页面都引用这个文件就好了,就没必要搞那么复杂了

直接在对应的 html 页面上,各自写各自的就可以了呀。
为什么要都要放在一起写呢?当前访问的是谁,谁的 ready 事件就加载各自的下拉框配置。

qq_36512295
痴迷、淡然~ 因为这是一个base.html,其他页面都要继承这个页面
10 个月之前 回复

你好,写一个页面的下拉框 js 独立出来, 每个页面的下拉框 html 都一样, 每个也都引入这个js文件就好了啊

个人观点,你要整合那些代码的话,你的重复1 2 3 4 5可以也到一个函数里面,然后传入的参数就是 aaa bbb之类。最后用switch进行选择。这样代码或许会好一些。

qq_36512295
痴迷、淡然~ 您好,我单写了个函数,现在的页面只提供一次点击,选择下拉框点击进入一个页面后,下拉框的不能再被点了....
10 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问