所有页面上的fadeto jquery函数，但很少（标记）元素

【问题标题】：fadeto jquery function on all page but few (tagged) elements所有页面上的fadeto jquery函数，但很少（标记）元素
【发布时间】：2014-03-10 09:38:29
【问题描述】：

我在网页上使用这个简单的脚本：

<script>
$(document).ready(function(){
    $("notowned").fadeTo(2000,0.2,function(){
   });
});
</script>

所以“notowned”标签下的所有元素（图像）都是灰色的。但是，对于这样的程序页面来说，这是非常违反直觉的，所以我想做相反的事情：淡出所有元素，然后将“拥有”标签添加到那些不应该变灰的元素。我尝试了各种方法，比如制作两个标签，但没有奏效。任何人都可以帮助我吗？谢谢！

编辑：这是jfiddle链接 http://jsfiddle.net/4tkH6/ 请注意，我有超过 118 个元素，所以我希望它们默认变灰，然后用标签或其他东西“非灰色”它们中的一些。 AFAIK fadetoggle 将它们完全删除，因此对我不利。

【问题讨论】：

在jsfiddle.net中提供您的代码

标签： jquery tags fadeto

【解决方案1】：

Playground

<notowned> 标签在 HTML5 中也不是标准标签，所以不要使用它。

使用<div> 之类的标准元素，如果您需要他们特别指定一个自定义data-* 属性来达到此目的：

<div data-owned="0">image 1</div>
<div data-owned="1">image 2</div>
<div data-owned="0">image 3</div>
<div data-owned="0">image 4</div>
<div data-owned="0">image 5</div>

CSS 示例：

[data-owned='0']{ opacity: 0.3; }
[data-owned='1']{ opacity: 1  ; }

JS/jQ 切换数据状态示例：

$('[data-owned]').click(function(){
  this.dataset.owned ^= 1; // Toggle 0/1
});

【讨论】：