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

场景

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

实现

页面代码
 

 <aside class="style_menu ovh abs top_0 press dis_none" id="ALL">

<span id="orderComfirmRed1" style="display:none"></span>

</aside>



 <aside class="style_menu ovh abs top_0 press dis_none"  id="noALL">

<span id="orderComfirmRed" style="display:none"></span>

</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); 
           }
           
           
         }
        });
  });