jquery 如何用弹出框动态制作菜单项

weylhg0b  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(105)

如果没有通过jquery找到的经验数据,我想在导航菜单上显示一个popover对象(li对象);这是导航菜单中“a”标签的data-content字段data-content=“Experience is empty”。
导航菜单:

<div class="span3 ozgecmis-sidebar">
    <ul class="nav nav-list ozgecmis-sidenav" id="ozgecmis-nav"> 
        <li><a href="#ogrenim" class="section-link">Öğrenim Bilgileri</a></li>
        <li><a href="#meslek" class="section-link">Meslek Bilgileri</a></li>                     
        <li id="experience" runat="server" ><a href="#exp" class="section-link" >Work Experience</a></li>                        
    </ul>        
</div>

字符串
如果没有经验数据,菜单项将

<div class="span3 ozgecmis-sidebar">  
    <ul class="nav nav-list ozgecmis-sidenav" id="ozgecmis-nav">
        <li><a href="#ogrenim" class="section-link">Öğrenim Bilgileri</a></li>
        <li><a href="#meslek" class="section-link">Meslek Bilgileri</a></li>     
        <li id="experience" runat="server"  style="background-color:pink;"><a class="popover-link-a section-link" href="#exp" data-toggle="popover" title="Work experience" data-content="Work Exp is empty !" onclick="javascript:return false;">Work experience</a>        
        </li>
    </ul> 
</div>


如果有经验数据,菜单项将是

<div class="span3 ozgecmis-sidebar">
    <ul class="nav nav-list ozgecmis-sidenav" id="ozgecmis-nav"> 
        <li><a href="#ogrenim" class="section-link">Öğrenim Bilgileri</a></li>
        <li><a href="#meslek" class="section-link">Meslek Bilgileri</a></li>       
        <li id="experience" runat="server" ><a href="#exp" class="section-link">Work Experience</a></li>
    </ul> 
</div>


下面的代码是一个简单的例子:

<script>
    $(document).ready(function () {
    var gridView = document.getElementById("ctl03_gridExperience");
    var rows = gridView.getElementsByTagName("tr");
    if (rows.length == 0) {
       document.querySelectorAll("a.section-link").forEach((item) => {
       if (item.innerText == 'Work Experience'){
           item.classList.add('popover-link-a');
       }
    }); 
  }                         
  }                  
  });
  </script>


我该怎么办?

3ks5zfa0

3ks5zfa01#

如果不需要,只需删除属性
不需要在a.section-link上循环,因为您可以使用document.querySelector("#experience a");直接访问体验链接

window.addEventListener("DOMContentLoaded", () => {
  const experience = document.querySelector("ctl03_gridExperience tr");
  const exLink = document.querySelector("#experience a");
  if (experience) {
    ["toggle", "content"].forEach(attr => delete exLink.dataset[attr]);
    exLink.classList.remove("popover-link-a");
  }
});

个字符

相关问题