点击改变选项背景图（或其他）

开发环境

• vue、jquery

需求

• 点击某个选项，其选项图标改变，且鼠标移出之后，保持背景图片改变的效果

简单分析

• 选项的图标分为两种状态：未选中、选中状态，有一些还需加上一个hover状态
• hover可以用css实现，但是如果选项过多，则代码过于冗长

实现方案

• 选中状态的选项动态加上特殊类名用于标识
• 同一选项的图片命名为aaa-1.png、aaa-2.png的状态
• 利用jquery甄别特殊类名的方法，给拥有特殊类名的选项动态改变背景图片

主要代码实现

1.结构代码

<ul>    <li class="item-0" :class="{'item-active' : active == 0}" @click="changeActive(0)"></li>    <li class="item-1" :class="{'item-active' : active == 1}" @click="changeActive(1)"></li>    <li class="item-2" :class="{'item-active' : active == 2}" @click="changeActive(2)"></li></ul>

2.vue-js代码

export default {  data () {    return {      active: 0    }  },  methods: {    // 改变active值    changeActive (index) {      this.active = index;      this.watchActive();    },    // 判断特殊类名：item-active,增加对应的样式    watchActive () {      for (var i = 0; i < 4; i++) {        var checkClass = 'item-' + i.toString();        var isActive = $('.' + checkClass).hasClass('item-active');        if (isActive == false) {          // 未被选中的选项，背景图为 xxx-1.png          $('.' + checkClass).css('background-image', 'url("./image/' + checkClass + '-1.png")');        } else {          // 被选中的选项，背景图为 xxx-2.png          $('.' + checkClass).css('background-image', 'url("./image/' + checkClass + '-2.png")');        }      }    },  }}

————————– 分割线 ————————————-
2017.08.19

开发环境

• 纯 jquery环境

源码查看地址

github: https://github.com/LucaLJX/jianshu_demo/tree/master/web%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/%E9%80%89%E9%A1%B9%E5%8D%A1%E7%82%B9%E5%87%BB%E6%9B%B4%E6%8D%A2%E8%83%8C%E6%99%AF%E5%9B%BE

主要代码实现

1.html代码

   <div class="menu">        <ul>            <li class="item-0 item item-active" onclick="clickItem(0)">选项卡一</li>            <li class="item-1 item" onclick="clickItem(1)">选项卡二</li>            <li class="item-2 item" onclick="clickItem(2)">选项卡三</li>        </ul>    </div>

2.js代码

$(document).ready(function () {    watch();});function watch () {    var length = $('.menu ul li').length;    for (var i = 0; i < length; i++) {        var checkClass = 'item-' + i.toString();        var hasActive = $('.' + checkClass).hasClass('item-active');        if (hasActive) {            $('.' + checkClass).css('background-image', 'url("./icons/' + checkClass + '-red.png")');        } else {            $('.' + checkClass).css('background-image', 'url("./icons/' + checkClass + '-blue.png")')        }    }}function clickItem (index) {    var length = $('.menu ul li').length;    for (var i = 0; i < length; i++) {        var clickClass = 'item-' + i.toString();        if (index == i) {            $('.' + clickClass).addClass('item-active');        } else {            $('.' + clickClass).removeClass('item-active');        }    }    watch ();}

如果有新的好方法，会持续更新。。。

BY–LucaLJX