2016-02-03 63 views
1

我想只選擇沒有特定data-filter-group的按鈕。在這種情況下,data-filter-group的值不等於「流派」。工作原理:不是選擇器

如何只選擇這些按鈕?

代碼工作正常,沒有:not()選擇器,所以我不明白它是如何工作的。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("#filters:not([data-filter-group='genres']) button").css("background-color", "yellow"); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<div id="filters"> 
 
    <div class="ui-group"> 
 
     <h3>Genere</h3> 
 
     <div id="genres" class="button-group js-radio-button-group" data-filter-group="genres"> 
 
      <button class="button is-checked" data-filter="">All<span></span></button> 
 
      <button class="button" data-filter=".Action">Action<span></span></button> 
 
      <button class="button" data-filter=".Adventure">Adventure<span></span></button> 
 
      <button class="button" data-filter=".Animation">Animation<span></span></button> 
 
      <button class="button" data-filter=".Comedy">Comedy<span></span></button> 
 
      <button class="button" data-filter=".Crime">Crime<span></span></button> 
 
      <button class="button" data-filter=".Drama">Drama<span></span></button> 
 
      <button class="button" data-filter=".Family">Family<span></span></button> 
 
      <button class="button" data-filter=".Fantasy">Fantasy<span></span></button> 
 
      <button class="button" data-filter=".Romance">Romance<span></span></button> 
 
      <button class="button" data-filter=".ScienceFiction">Science Fiction<span></span></button> 
 
      <button class="button" data-filter=".Thriller">Thriller<span></span></button> 
 
     </div> 
 
    </div> 
 
    <br /> 
 
    <div class="ui-group"> 
 
     <h3>Registi</h3> 
 
     <div id="directors" class="button-group js-radio-button-group" data-filter-group="directors"> 
 
      <button class="button is-checked" data-filter="">All<span></span></button> 
 
     </div> 
 
    </div> 
 
    <div class="ui-group"> 
 
     <h3>Attori</h3> 
 
     <div id="actors" class="button-group js-radio-button-group" data-filter-group="actors"> 
 
      <button class="button is-checked" data-filter="">All<span></span></button> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

+0

'$(「#過濾器來實現:不使用(數據濾波器組= '流派' ])>按鈕「)' –

回答

0

這可以以2種方式

$("div[data-filter-group!='genres'] > button ").css("background-color", "yellow"); 

or 

$(":not([data-filter-group='genres']) > button").css("background-color", "yellow"); 

https://jsfiddle.net/vxtochsu/