javascript - 如果 url 等于链接的 href，则添加一个类

Question

我正在尝试在 WordPress 中制作一个 jQuery 脚本，它将“事件”类添加到我的边栏元素中，该元素具有与导航栏中匹配链接相同的 URL。

(function ($) {
    var url = window.location.href;
    $('.navbar-nav li').each(function ($) {
        if ($('.navbar-nav li a').attr('href') == url) {
            $('.navbar-nav li').addClass('active');
        }
    });
    console.log(url);
})(jQuery);

.active {
background-color: black;}
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-white">	
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <ul class="nav navbar-nav">
        <li class="nav-item menu_accueil only-mobile">
            <a class="nav-link" href="<?php echo get_site_url() ?>/">
                Accueil
            </a>
        </li>
        <li class="nav-item menu_marque">
          <a class="nav-link" href="<?php echo get_site_url() ?>/la-marque-honey">
            La marque 
          </a>
        </li>
        <li class="nav-item menu_formule">
          <a class="nav-link" href="<?php echo get_site_url().'/la-formule-honey' ?>">
            La formule 
          </a>
        </li>
        <li class="nav-item menu_bebe">
          <a class="nav-link" href="<?php echo get_site_url() ?>/conseil">
            Le monde de bébé
          </a>
        </li>
      </ul>

    </div>
  </nav>

它显示错误($ 不是函数)，而网站上还有另一段代码可以很好地处理相同的选择器。

这里有什么问题？谢谢

Answer 1

It shows an error ( $ is not a function )

此错误是因为您在 each 中将 $ 重新定义为要迭代的元素:

 $('.navbar-nav li').each(function ($) {
 // Dont do this -------------------^

您的代码有一些问题，但总的来说，您所做的是在整个页面中使用选择器，而不是使用 each

枚举当前元素的选择器

$(function() {

  var url = window.location.href;
  $('.navbar-nav li').each(function() {
    if ($('a',this).attr('href') == url) {
      $(this).addClass('active');
    }
  });
  console.log(url);


});

.active {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<nav class="navbar fixed-top ">
  <div class="" id="navbarTogglerDemo01">
    <ul class="nav navbar-nav">
      <li class="nav-item menu_accueil only-mobile">
        <a class="nav-link" href="xxx">
                Accueil
            </a>
      </li>
      <li class="nav-item menu_marque">
        <a class="nav-link" href="xxx">
            La marque 
          </a>
      </li>
      <li class="nav-item menu_formule">
        <a class="nav-link" href="https://stacksnippets.net/js">
            La formule 
          </a>
      </li>
      <li class="nav-item menu_bebe">
        <a class="nav-link" href="xxx">
            Le monde de bébé
          </a>
      </li>
    </ul>

  </div>
</nav>