Question

我想只选择没有特定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>

Answer 1

这可以通过两种方式实现

$("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/

如何工作：不是选择器

1 个答案: