如何创建反转图像按钮？

【问题标题】：How do I go about creating an invert images button?如何创建反转图像按钮？
【发布时间】：2014-12-16 12:38:09
【问题描述】：

我查看了 css 过滤器“反转”，但我正在努力思考如何通过单击文本链接来反转我的所有图像（具有 Id=images）。我还需要能够再次单击链接以删除反转过滤器。如果有人有想法那就太好了。

仅供参考：我所有的图像都被标记为 Id=images 并且都在同一个 div 中。反转链接（文本）有它自己的固定 div，z-index 2000..（前层）

谢谢

【问题讨论】：

你的问题不是很清楚：“反转css过滤器”是什么意思？最好的办法是分享您现在拥有的代码，解释什么不起作用以及所需的行为。否则，您似乎在同一个网页上多次使用相同的 id。你应该改用一个类。

标签： css hyperlink css-filters

【解决方案1】：

http://jsfiddle.net/hu8tn0qb/1/

将你所有的 id="images" 变成 class="images" （你不能多次使用一个 id），然后在下面的代码中添加。

第一个代码块是 jQuery，当单击 id 为“invert_btn”的 div 时，它将向所有具有“image”类的图像添加“inverted”类。通过使用 .toggleClass，它会在第二次单击时删除该类。

$('#invert_btn').click(function() {
  $(".images").toggleClass("inverted");
});

.inverted {
  -webkit-filter: invert(1);
  filter: invert(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="invert_btn">Click Me</div>

<img src="http://placekitten.com/g/200/300" class="images" />
<img src="http://placekitten.com/g/200/300" class="images" />

【讨论】：