Question

我尝试编写此函数：

$( "button" ).click(function() {
$("*").not(".one").css("color", "blue");
$(".one").css("background-color", "blue");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Button</button>

<p>g7z8h7u9jiokp</p>
<div>fdklfjöalsdkfdksla</div>
<p class="one">should have a black font color after button click</p>
<p>djkflöadjsdfklfösadj dfnasdkl</p>
<div>fdklfjöalsdkfdksla</div>
<p>jiorpojiweopk w</p>
<span>ijokp 4rwerw</span>
<span class="one">should have a black font color after button click</span>
<p>ijokp 4rwerw</p>
<span>ijokp 4rwerw</span>

不幸的是，它不起作用。我想为.one类的所有元素添加蓝色字体颜色。

如何解决？

Answer 1

代码$("*").not(".one").css("color", "blue");不会更改<p class="one">标签的字体颜色，但是会更改父标签的字体颜色，该字体将级联到所有<p class="one">子级，从而影响了他们。

尝试将您的代码更改为$("p").not(".one").css("color", "blue");

Answer 2

通常，您永远不要使用$("*")，因为它包括页面中的所有dom元素，包括html，head，style和script标签，并且更改所有这些内容可能会在应用程序中造成不良行为。另外，如果您的页面有很多元素，那么遍历整个DOM也可能需要一些时间。您最好使用父容器，然后可以使用所有子元素及其后代，例如：

$("body *")

演示：

$("button").click(function() {
  $("body *").not(".one").css("color", "blue");
  $(".one").css({"background-color":"blue", "color": "white"});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Button</button>

<p>g7z8h7u9jiokp</p>
<div>fdklfjöalsdkfdksla</div>
<p class="one">should have a black font color after button click</p>
<p>djkflöadjsdfklfösadj dfnasdkl</p>
<div>fdklfjöalsdkfdksla</div>
<p>jiorpojiweopk w</p>
<span>ijokp 4rwerw</span>
<span class="one">should have a black font color after button click</span>
<p>ijokp 4rwerw</p>
<span>ijokp 4rwerw</span>

Answer 3

也许您可以使用此代码段。

$( "button" ).click(function() {
    $("*").css("color", "blue");
    $(".one").css("color","black");
});

$( "button" ).click(function() {
	$("*").css("color", "blue");
  $(".one").css("color","black");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Button</button>

<p>g7z8h7u9jiokp</p>
<div>fdklfjöalsdkfdksla</div>
<p class="one">should have a black font color after button click</p>
<p>djkflöadjsdfklfösadj dfnasdkl</p>
<div>fdklfjöalsdkfdksla</div>
<p>jiorpojiweopk w</p>
<span>ijokp 4rwerw</span>
<span class="one">should have a black font color after button click</span>
<p>ijokp 4rwerw</p>

Answer 4

为.one元素设置背景颜色和字体颜色：

$("button").click(function() {
  $("*").not(".one").css("color", "blue");
  $(".one").css({
    "background-color": "blue",
    "color": "black"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Button</button>

<p>g7z8h7u9jiokp</p>
<div>fdklfjöalsdkfdksla</div>
<p class="one">should have a black font color after button click</p>
<p>djkflöadjsdfklfösadj dfnasdkl</p>
<div>fdklfjöalsdkfdksla</div>
<p>jiorpojiweopk w</p>
<span>ijokp 4rwerw</span>
<span class="one">should have a black font color after button click</span>
<p>ijokp 4rwerw</p>
<span>ijokp 4rwerw</span>

为什么jQuery选择器“ $（” *“）。not”不起作用？

4 个答案: