js實(shí)現(xiàn)class樣式的修改、添加及刪除的方法
本文實(shí)例講述了js實(shí)現(xiàn)class樣式的修改、添加及刪除的方法。分享給大家供大家參考。具體分析如下：
比較常見的js前端功能，通過修改標(biāo)簽的className實(shí)現(xiàn)相應(yīng)的功能。
具體代碼如下：
<tbody>
<tr>
<td>js實(shí)現(xiàn)class的樣式的修改、添加、刪除</td>
<td>
<a e_value="g_sn" ename="商品編碼" class="goods_sale_property" href="javascript:void(0);">商品編碼</a>
<a e_value="pdt_sn" ename="商品貨號(hào)" class="goods_sale_property" href="javascript:void(0);">商品貨號(hào)</a>
<a e_value="pdt_name" ename="規(guī)格名稱" class="goods_sale_property" href="javascript:void(0);">規(guī)格名稱</a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td><a onclick="selectAll()" style="color:#F00">全選</a> </td>
<td><a onclick="selectNotAll()" style="color:#F00">全不選</a></td>
</tr>
</tbody>
</table>
<script>
$('.goods_sale_property').click(function(){//單獨(dú)a標(biāo)簽點(diǎn)擊添加class
if($(this).hasClass('goods_sale_property_checked')){
$(this).removeClass('goods_sale_property_checked');
}else{
$(this).addClass('goods_sale_property_checked');
}
});
function selectAll(){//全選添class
$('.goods_sale_property').each(function(i){
$(this).addClass('goods_sale_property_checked');
});
}
function selectNotAll(){//全選刪除class
$('.goods_sale_property').each(function(i){
$(this).removeClass('goods_sale_property_checked');
});
}
</script>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- 詳解用JS添加和刪除class類名
- 基于JavaScript實(shí)現(xiàn)類名的添加與移除
- 向JavaScript的數(shù)組中添加元素的方法小結(jié)
- 原生js實(shí)現(xiàn)查找/添加/刪除/指定元素的class
- javaScript給元素添加多個(gè)class的簡(jiǎn)單實(shí)現(xiàn)
- JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
- JS添加或修改控件的樣式(Class)實(shí)現(xiàn)方法
- Javascript 檢測(cè)、添加、移除樣式(className)函數(shù)代碼
- 原生js實(shí)現(xiàn)class的添加和刪除簡(jiǎn)單代碼
- 原生js封裝添加class,刪除class的實(shí)例
- 原生js添加一個(gè)或多個(gè)類名的方法分析
相關(guān)文章
javascript中關(guān)于break,continue的特殊用法與介紹
javascript大家所熟知中的for是一個(gè)循環(huán)體，循環(huán)體其中的break和continue也是大家都比較熟悉的功能，相信大家對(duì)它們的用法不會(huì)陌生，本文不是介紹其功能，本文假設(shè)你已經(jīng)熟悉break和continue的語(yǔ)意和用法2012-05-05
動(dòng)態(tài)統(tǒng)計(jì)當(dāng)前輸入內(nèi)容的字節(jié)、字符數(shù)的實(shí)例詳解
這篇文章主要介紹了動(dòng)態(tài)統(tǒng)計(jì)當(dāng)前輸入內(nèi)容的字節(jié)、字符數(shù)的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
下面小編就為大家?guī)?lái)一篇深入理解JS addLoadEvent函數(shù)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-05-05
JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了Boostrap popover用法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。這篇文章主要為大家詳細(xì)介紹了Web Uploader文件上傳插件使用方法，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript?映射器?array.flatMap()
這篇文章主要介紹了JavaScript?映射器?array.flatMap()，array.flatMap()是一個(gè)映射函數(shù)，它接收一個(gè)數(shù)組和一個(gè)映射函數(shù)，然后返回一個(gè)新的映射數(shù)組，下面進(jìn)入文章了解具體內(nèi)容2022-02-02
利用uniapp開發(fā)APP時(shí)的調(diào)試/安卓打包等詳解
uni-app??是一個(gè)使用??Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,下面這篇文章主要給大家介紹了關(guān)于利用uniapp開發(fā)APP時(shí)的調(diào)試/安卓打包等的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了詳解ECMAScript2019/ES10新屬性，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12