Question

我有一些jQuery代码，并且可以正常运行，但是我需要知道这一行的解释方式，not()函数之间的含义是什么？

$(document).ready(function(){
  $('.nav').on('click', 'li > a', function(){
    var $li = $(this).parent();
    $li.siblings().not($li.addClass('active')).removeClass('active');
  });
});

Answer 1

$li.addClass('active')

这将返回$li，以防万一您想将多个功能链接在一起。

所以

$li.siblings().not($li.addClass('active')).removeClass('active');

与以下相同：

$li.addClass('active');
$li.siblings().not($li).removeClass('active');

这意味着$li的所有兄弟姐妹，而不是$li本身。之所以愚蠢，是因为它从来都不是自己的兄弟。

因此，我们将其简化为：

$li.addClass('active');
$li.siblings().removeClass('active');

说，将active类添加到已单击的li并将其从其他li中删除。

Answer 2

添加了代码并说明了hover示例。

$(document).ready(function(){
  
  $('.nav').on('click', 'li > a', function(){
    var $li = $(this).parent();
    $li.siblings().not($li.addClass('active')).removeClass('active');
  });
  
  $('.nav').on('mouseover', 'li > a', function(){
    var $li = $(this).parent(); // get parent of hovered <a> (<li>)
    $siblings = $li.siblings(); // get all siblings of <li> containing the hovered <a>
    $li.addClass('hover'); // add 'active' to <li> containing hovered <a>
    $siblings_except_clicked = $siblings.not($li); // get all siblings NOT <li> containing hovered a
    $siblings.removeClass('hover'); // remove 'active' class from every <li> except the one with hovered <a>
  });
  
  
});

ul.nav {
  margin: 0px pading: 0px;
}

ul.nav li {
  display: inline-block;
  text-align: center;
  width: 80px;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
}

ul.nav li.active {
  border-bottom: 3px solid black;
}

ul.nav li.hover {
  border-top: 3px solid grey;
}

a {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='nav'>
  <li class='active hover'><a href='#'>Entry A</a></li>
  <li><a href='#'>Entry B</a></li>
  <li><a href='#'>Entry C</a></li>
</ul>

第四行在这里到底发生了什么？

2 个答案: