同一个页面两个aside标签ID重复问题导致的功能缺失

男娘i 2023-10-18 14:55 106阅读 0赞

## 场景 ##

在jsp页面中，有两个aside标签，分别实现有网以及无网情况下的两套左边导航栏的显示。

## 实现 ##

页面代码

js代码

通过判断是否在线，显示不同的aside标签的内容，然后在两个aside标签中有两个相同ID的span元素。

这里一定要确保这两个span元素的id不一致，否则会造成功能缺陷。

遇到过坑，以此警戒！

$(function(){
          
         if(window.navigator.onLine){
       $("#ALL").css("display","inline-block");
         }else{
           $("#noALL").css("display","inline-block");
         }
         
          var url = "${ctx}/front/tbOnPurchaseAction/waitReceived";
         
         $.ajax({
          async : false,
             cache : false,
             type : 'POST',
             url : url,
             data :{dsType:'sysDs'},
               
             dataType:"json",
             success : function(data) {
              
              if(data.data==0){
                $("#orderComfirmRed").hide();
                $("#orderComfirmRed1").hide();
               }else{
                $("#orderComfirmRed").css("display","block");
                $("#orderComfirmRed1").css("display","block");
                $("#orderComfirmRed").text(data.data); 
                $("#orderComfirmRed1").text(data.data); 
               }
               
               
             }
            });
      });