找到你要的答案

Q:Selector :not in jQuery not working

Q:选择:不在jQuery不工作

I have a body with ID body and inside it a div with class nav-container. I want to remove certain classes when users click on the #body, but not .nav-container (it's an overlay type of menu).

Tried below code

HTML:

<body id="body">
  <div class="nav-container">
    <a href="#" id="close-btn"> X </a>
    <nav class="display">
      <ul>
        <li><a href="#"> One </a></li>
        <li><a href="#"> Two </a></li>
        <li><a href="#"> Three </a></li>
     </ul>
   </nav>
 </div>
</body>

jQuery

$('#body :not(.nav-container)').click(function() {
    $('.cover').removeClass('active-cover');
    $('.nav-container').removeClass('active');
});

It does not seem to be working for me though.

我身体里面的ID的div容器类资产净值有一个身体。我想删除某些类,当用户点击#体,但不是。资产净值的容器(这是菜单覆盖型)。

尝试下面的代码

HTML:

<body id="body">
  <div class="nav-container">
    <a href="#" id="close-btn"> X </a>
    <nav class="display">
      <ul>
        <li><a href="#"> One </a></li>
        <li><a href="#"> Two </a></li>
        <li><a href="#"> Three </a></li>
     </ul>
   </nav>
 </div>
</body>

jQuery

$('#body :not(.nav-container)').click(function() {
    $('.cover').removeClass('active-cover');
    $('.nav-container').removeClass('active');
});

它似乎并没有为我工作虽然。

answer1: 回答1:

It wont work as not exclude the selected elements which pass the earlier css-selector criteria since .nav-container is not part of list that is selected by #body (wont be list in this case as its ID), so you wont be able to exclude that. So basically what you need is

$(document).on("click", "div:not('.nav-container')",function() {
    $('.cover').removeClass('active-cover');
    $('.nav-container').removeClass('active');
});

It wont work as not exclude the selected elements which pass the earlier css-selector criteria since .nav-container is not part of list that is selected by #body (wont be list in this case as its ID), so you wont be able to exclude that. So basically what you need is

$(document).on("click", "div:not('.nav-container')",function() {
    $('.cover').removeClass('active-cover');
    $('.nav-container').removeClass('active');
});
answer2: 回答2:

the first element shouldn't be the parent, like #body, rather the element. for example div:not('example') works for every div except example.

$("div:not(.nav-container)").click(function() {
alert("nav-container was not clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body">
  <div class="nav-container">
    <a href="#" id="close-btn"> X </a>
    <nav class="display">
      <ul>
        <li><a href="#"> One </a></li>
        <li><a href="#"> Two </a></li>
        <li><a href="#"> Three </a></li>
     </ul>
   </nav>
 </div>
  <br />
  <div>click here </div>
</body>

the first element shouldn't be the parent, like #body, rather the element. for example div:not('example') works for every div except example.

$("div:not(.nav-container)").click(function() {
alert("nav-container was not clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body">
  <div class="nav-container">
    <a href="#" id="close-btn"> X </a>
    <nav class="display">
      <ul>
        <li><a href="#"> One </a></li>
        <li><a href="#"> Two </a></li>
        <li><a href="#"> Three </a></li>
     </ul>
   </nav>
 </div>
  <br />
  <div>click here </div>
</body>
javascript  jquery  html  jquery-selectors