Question

基本上问题是自我解释。我无法弄清楚如何结合javascript的小片段而不是两个单独的文件。

这两个代码是：

$(function(){
    $('.navbar li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
      $(this).addClass('active').siblings().removeClass('active');
        }
    });
});

$(function(){
    $('.dropdown-menu li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
      $(this).removeClass('active')
        }
    });
});

另一个问题是第一个$(function()是否必要？

谢谢你的帮助。

Answer 1

你可以这样做：

创建一个函数并在其下调用它。或者，你这样做：

$(function(){
    $('.navbar li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
      $(this).addClass('active').siblings().removeClass('active');
        }
    });
    $('.dropdown-menu li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
      $(this).removeClass('active')
        }
    });
});

一些注意事项：

这两个功能不同。
您不需要两个功能启动器，$(function(){})两次。

Answer 2

你可以这样：

$(function(){
    $('.navbar li, .dropdown-menu li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
            if($(this).parents(".navbar").length > 0)//this is to figure out if we are working with LI inside .navbar or not.
                $(this).addClass('active').siblings().removeClass('active');
            else
                $(this).removeClass('active')

        }
    });
});

函数几乎相同，只是您需要检测是否使用.navbar中的LI来选择核心removeClass代码。

此外，在您的代码中，首先需要$(function()。否则，可以在加载文档之前启动其中的代码。但是您可以将两段代码放在一个$(function()

中

Answer 3

完整的工作样本，这将使第一个UL红色的第一个LI，并从第二个UL LI中删除红色。您的两个功能现已合并。

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <title></title>
        <style type="text/css">
        .active {background-color:red}
        ul.dropdown-menu>li.active {background-color:red}
        </style>
    </head>
    <body>

    </body>
    <ul class="navbar">
    <li><a href="file:///C:/Users/cisadohe/Desktop/new10.htm">first</a></li>
    <li>old</li>
    <li>new</li>
    <li>4</li>
    </ul>

    <ul class="dropdown-menu">
    <li class="active"><a href="file:///C:/Users/cisadohe/Desktop/new10.htm">first</a></li>
    <li>old</li>
    <li>new</li>
    <li>4</li>
    </ul>


    <script type="text/javascript">
    $(function(){
        $('.navbar li').each(function(){
          if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
            {
          $(this).addClass('active').siblings().removeClass('active');
            }
        });

        $('.dropdown-menu li').each(function(){
          if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
            {
          $(this).removeClass('active')
            }
        });
    });
    </script>
    </html>

关于组合两个小Javascript代码

3 个答案:

你可以这样做：