選擇除子div以外的部分

我在section.artist-info上做了一個點擊事件，但問題是我不會在.core-info上有那個點擊事件。所以我寫了這個CSS選擇器.artist-info:not(.core-info)用於選擇我需要和不需要的元素。但它沒有奏效。所以我現在的問題是如何選擇section.artist-info，除了孩子div.core-info？這裏是我的代碼：選擇除子div以外的部分

$("body").on("click", ".artist-info:not(.core-info)", function() { 
 
    if (!$(this).hasClass("preview-lied")) { 
 
     alert("clicked"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <section class="artist-info"> <!-- I'll select this --> 
 
     <div class="toggle-panel"> <!-- I'll select this inclusieve the child --> 
 
      <p>&#9776;</p> 
 
     </div> 
 
     <div class="core-info"> <!-- I won't select this inclusieve the child tags --> 
 
      <h1 class="titel">artist</h1> 
 
      <p class="bold">Top nummers</p> 
 
      <ul class="top-nummers"> 
 
       <li>number 1</li> 
 
       <li>number 2</li> 
 
       <li>number 3</li> 
 
      </ul> 
 
     </div> 
 
    </section> 
 
</body>

來源

2016-01-23 H. Pauwelyn

格：不是可以幫你做到這一點，你的使用不是不喜歡它在文檔 –

你只需要添加>到.artist-info:not(.core-info)

$("body").on("click", ".artist-info:not(> .core-info)", function() { 
 
    if (!$(this).hasClass("preview-lied")) { 
 
     alert("clicked"); 
 
    } 
 
});

.artist-info { 
 
background: gray; 
 
} 
 

 
.core-info { 
 
    background: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="artist-info"> 
 
     <div class="toggle-panel"><p>&#9776;</p></div> 
 
     <p class="fa fa-pause fa-2x big-play"></p> 
 
     <div class="core-info"> 
 
      <h1 class="titel"></h1> 
 
      <p class="bold">Top nummers</p> 
 
      <ul class="top-nummers"> 
 
       <li>number 1</li> 
 
       <li>number 2</li> 
 
       <li>number 3</li> 
 
      </ul> 
 
     </div> 
 
    </section>

來源

2016-01-23 10:42:12

解釋我覺得OP要選擇父不是點擊兒童，或者我可能是錯的。 –

沒問題隊友'：）' –

請仔細閱讀有關:not。你的代碼應該是

$("body").on("click", ".artist-info div:not(.core-info)", function() { 
 
    if (!$(this).hasClass("preview-lied")) { 
 
     alert("clicked"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <section class="artist-info"> 
 
     <div class="toggle-panel"> 
 
      <p>&#9776;</p> 
 
     </div> 
 
     <div class="core-info"> 
 
      <h1 class="titel">artist</h1> 
 
      <p class="bold">Top nummers</p> 
 
      <ul class="top-nummers"> 
 
       <li>number 1</li> 
 
       <li>number 2</li> 
 
       <li>number 3</li> 
 
      </ul> 
 
     </div> 
 
    </section> 
 
</body>

當你寫.artist-info:not(.core-info)瀏覽器試圖找到.artist-info類部分沒有.core-info類。但是當你添加.artist-info div:not(.core-info)瀏覽器尋找div這是進入.artist-info和帶班.core-info

來源

2016-01-23 10:42:20

選擇除子div以外的部分

回答

相關問題