以上便是使用jq便可以实现的，下面的是如果想优化性能的时候，可以尝试做的：

每个元素请求一张图片太浪费了，我们将所有图片合并成一张，然后用 background-position 去控制要显示的图标：

最后使用jquery去控制点击切换：

具体图片位置根据合成的图片去定义了，这样请求的图片就只需要请求一张了

//调用插件
<script type="text/javascript">

如果每张图片都很小，那么使用工具将其变成 base64 内嵌到代码里面，那么连一张图片都不需要请求了！
然后就可以这样写：

</script>
兼容所有浏览器，执行后会在元素上加入很多行内样式，如果你对兼容性要求不高的话建议使用CSS实现灰度效果。
2、jq 点击切换src

js只控制行为，对于样式就交给css去实现吧，做好行为样式内容的分离。
在HTML中分别为这十四个元素定义好类名，然后在CSS里分别为这些元素使用不同的背景，如下：

1/使用-webkit-filter: grayscale(100%);css3灰度属性 ie filter:Gray;
移动上去移除这个属性
//引入插件
<script type="text/javascript" src="grayscale.js"></script>

除了css，js和html在性能优化的时候都不需要改动，这就是我一开始提到了mvc分离，对于后期维护和性能优化都有一定的好处，不知道能不能帮到你