淡出元素

Question

我正在尝试使用代码

淡出元素

$('[title!="head"]').each(function () {
    $(this).fadeOut(100);
});

使用上面的代码，所有元素都在淡出，包括带有 $('[title="head"]') 的元素。

代码完全符合条件

$('[title="head"]')

如有任何意见，我们将不胜感激。

Answer 1

您可以使用 filter 过滤具有 title 而不是 "head"

的元素

Demo

$(document).ready(function() {
  $('div')
    .filter(function() {
      return $(this).attr('title') !== 'head';
    })
    .fadeOut(100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div title="head">HEAD</div>
<div title="myhead">MY HEAD</div>
<div title="your head">YOur HEAD</div>
<div title="head">Again HEAD</div>
<div title="headNo">HEAD No</div>

Answer 2

只需使用 :not()

$('body *:not([title="head"])').each (function(){
    $(this).fadeOut(100);
});

Answer 3

你的 select 或者是问题所在：$('[title!="head"]') 将 select 除了具有 title="head" 的元素之外的所有内容，然后淡出他们出来了。

这应该更清楚，请考虑以下标记：

<body>
  <div title="head">Hello World!</div>
</body>

您的 selector 在本例中将 select body，然后淡出，因为 <div> 是 <body> 的子项，结果将间接淡出。你最终会得到这样的结果：

<body style="display: none;">
  <div title="head">Hello World!</div>
</body>

Answer 4

过滤器在这里实际上是多余的。实际问题是针对所有元素，包括 @billyonecan 提到的 body 。根据描述 "all the elements are fading out" DOM 就绪没有问题。

解决方案是仅针对特定元素，例如仅具有标题属性的项目，然后添加 !=head:

例如

$('[title][title!=head]')

JSFiddle: https://jsfiddle.net/wfp8o9hx/1/

或

$('div[title][title!=head]').fadeOut(100);

JSFiddle: https://jsfiddle.net/wfp8o9hx/

最好是比 div 更具体的东西 :)

淡出元素

FadeOut element

html

jquery

attributes

fadeout