点击实现图片切换

Question

如何用jQuery实现分别点击暗图标切换为高亮图标？

Answer 1

普通实现

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

.icon.icon-all {
    background: url('./icon-all.png');
}
.icon.icon-all.active {
    background: url('./icon-all-active.png');
}
.icon.icon-school {
    background: url('./icon-school.png');
}
.icon.icon-school.active {
    background: url('./icon-school-active.png');
}
...

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

$('.icon').on('click', function() {
    $(this).toggleClass('active');
}

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

进阶实现

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

.icon.icon-all {
    background: url('./icon-all.png');
    background-position: 0px, 0px;
}
.icon.icon-all.active {
    background: url('./icon-all.png');
    background-position: 0px, 20px;
}
.icon.icon-school {
    background: url('./icon-all.png');
    background-position: 20px, 0px;
}
.icon.icon-school.active {
    background: url('./icon-all.png');
    background-position: 20px, 20px;
}
...

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

再次进阶

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

.icon.icon-all {
    background: url('xxxxxx'); // base64格式的字符串
}
.icon.icon-all.active {
    background: url('xxxxxx');
}
.icon.icon-school {
    background: url('xxxxxx');
}
.icon.icon-school.active {
    background: url('xxxxxx');
}
...

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

Answer 2

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

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

window.onload = function(){
    var el = document.getElementById( 'body' );
    grayscale( el );
};

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