利用JQuery / Vue中點選元素隻為其添加樣式

一、利用JQuery

html代碼

<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>
           

css代碼

ul {
            width: 400px;
        }

        li {
            width: 100%;
            height: 80px;
            border: 1px solid #000;
        }

        .active {
            background: red;
        }
           

首先引入JQuery CDN

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
           

js代碼

$('li').click(function(){
               $(this).siblings().removeClass('active');
               $(this).addClass('active');
           })
           

二、Vue中（v-for資料時）

相信大家都會遇到這種情況：v-for循環時，我隻需要點選到的元素做出相應反應，其他的元素不變；但是往往所有v-for循環出的元素都會變化。如下面的代碼：我需要點選到的元素添加一個類樣式，其他元素不變，但是這樣會導緻所有的元素都會變化

解決方法：使用index索引，當點選一個元素時，将該元素的index索引賦給類樣式的啟用變量，如果該變量和index相等時，則啟用該類樣式

html:

< div v-for = "(item,index) in items"  :class = "isactive == index ? 'addclass' : '' " @click='onclick(index)'>
	< span>{{item.name}}< /span>
< /div>
           

css:

.addclass{
    color : red;
}
           

js:

data:{
    items :[
        {
        name:'apple',
        price: '5'
        },
        {
        name:'banana',
        price:"3"
        },
        {
        name:'pear',
        price:'4'
        }
    ],
    isactive : -1
}

onclick(index){

    //将點選的元素的索引指派給bian變量

    this.isactive = index
}