開(kāi)發(fā)環(huán)境
- vue偏窝、jquery
需求
- 點(diǎn)擊某個(gè)選項(xiàng)，其選項(xiàng)圖標(biāo)改變帖族，且鼠標(biāo)移出之后，保持背景圖片改變的效果
Paste_Image.png
簡(jiǎn)單分析
- 選項(xiàng)的圖標(biāo)分為兩種狀態(tài)：未選中挡爵、選中狀態(tài)竖般，有一些還需加上一個(gè)hover狀態(tài)
- hover可以用css實(shí)現(xiàn)，但是如果選項(xiàng)過(guò)多茶鹃，則代碼過(guò)于冗長(zhǎng)
實(shí)現(xiàn)方案
- 選中狀態(tài)的選項(xiàng)動(dòng)態(tài)加上特殊類(lèi)名用于標(biāo)識(shí)
- 同一選項(xiàng)的圖片命名為aaa-1.png捻激、aaa-2.png的狀態(tài)
- 利用jquery甄別特殊類(lèi)名的方法，給擁有特殊類(lèi)名的選項(xiàng)動(dòng)態(tài)改變背景圖片
主要代碼實(shí)現(xiàn)
1.結(jié)構(gòu)代碼
<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();
},
// 判斷特殊類(lèi)名：item-active,增加對(duì)應(yīng)的樣式
watchActive () {
for (var i = 0; i < 4; i++) {
var checkClass = 'item-' + i.toString();
var isActive = $('.' + checkClass).hasClass('item-active');
if (isActive == false) {
// 未被選中的選項(xiàng)前计，背景圖為 xxx-1.png
$('.' + checkClass).css('background-image', 'url("./image/' + checkClass + '-1.png")');
} else {
// 被選中的選項(xiàng)，背景圖為 xxx-2.png
$('.' + checkClass).css('background-image', 'url("./image/' + checkClass + '-2.png")');
}
}
},
}
}
-------------------------- 分割線 -------------------------------------
2017.08.19
開(kāi)發(fā)環(huán)境
- 純 jquery環(huán)境
源碼查看地址
主要代碼實(shí)現(xiàn)
1.html代碼
<div class="menu">
<ul>
<li class="item-0 item item-active" onclick="clickItem(0)">選項(xiàng)卡一</li>
<li class="item-1 item" onclick="clickItem(1)">選項(xiàng)卡二</li>
<li class="item-2 item" onclick="clickItem(2)">選項(xiàng)卡三</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 ();
}
如果有新的好方法垃杖，會(huì)持續(xù)更新男杈。。调俘。
BY--LucaLJX
