js實(shí)現(xiàn)為a標(biāo)簽添加事件的方法(使用閉包循環(huán))
本文實(shí)例講述了js實(shí)現(xiàn)為a標(biāo)簽添加事件的方法。分享給大家供大家參考，具體如下：
以示例說明：
實(shí)現(xiàn)效果：循環(huán)為帶有ml-praise樣式類的a標(biāo)簽添加事件，并且在點(diǎn)擊a標(biāo)簽后，相應(yīng)的數(shù)量增加1。
Html結(jié)構(gòu)如下所示：
<ul>
<li><a href="javascript:;" class="ml-praise">數(shù)量：<span class="ding-num">100</span></a></li>
<li><a href="javascript:;" class="ml-praise">數(shù)量：<span class="ding-num">200</span></a></li>
<li><a href="javascript:;" class="ml-praise">數(shù)量：<span class="ding-num">300</span></a></li>
<li><a href="javascript:;" class="ml-praise">數(shù)量：<span class="ding-num">400</span></a></li>
</ul>
JS實(shí)現(xiàn)代碼：
function addPraiseNum() {
var praiseObjs = document.getElementsByClassName('ml-praise');
for (var i = 0; i < praiseObjs.length; i++) {
var praiseObj = praiseObjs[i];
praiseObj.onclick = (function (dingObj) {
return function () {
dingObj.innerHTML = parseInt(dingObj.innerHTML) + 1;
};
})(praiseObj.getElementsByClassName('ding-num')[0]);
}
}
實(shí)現(xiàn)效果如下：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript遍歷算法與技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
javascript模擬git diff命令實(shí)現(xiàn)文本文件差異比較
這篇文章主要為大家詳細(xì)介紹了javascript如何模擬git diff命令實(shí)現(xiàn)文本文件差異比較效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考下2023-12-12
最近公司需求做一個微信紅包雨功能,這里給大家總結(jié)下實(shí)現(xiàn)的方法,這篇文章主要給大家介紹了關(guān)于uni-app微信小程序之紅包雨活動的相關(guān)資料,需要的朋友可以參考下2024-01-01
原生javascript上傳圖片帶進(jìn)度條【實(shí)例分享】
本文主要介紹了原生javascript上傳圖片帶進(jìn)度條的實(shí)例詳解。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
js 關(guān)鍵詞高亮(根據(jù)ID/tag高亮關(guān)鍵字)案例介紹
關(guān)鍵詞高亮在開發(fā)中會帶來很多的方便，關(guān)鍵詞高亮包括:根據(jù)ID高亮關(guān)鍵字/根據(jù)Tag名高亮關(guān)鍵字等等，感興趣的朋友可以了解下，希望本文對你有所幫助2013-01-01
VSCode開發(fā)TypeScript的實(shí)現(xiàn)步驟
本文主要介紹了VSCode開發(fā)TypeScript的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
JS下載文件的實(shí)現(xiàn)在網(wǎng)上可以找到很多教程，不過本文為大家介紹的是無刷新下載文件，貌似更酷一點(diǎn)是吧2014-04-04
weui中的picker使用js進(jìn)行動態(tài)綁定數(shù)據(jù)問題
這篇文章主要介紹了weui中的picker使用js進(jìn)行動態(tài)綁定數(shù)據(jù)問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
從層次上來看，對象的復(fù)制可以簡單地分為淺復(fù)制和深復(fù)制，顧名思義，淺復(fù)制是指只復(fù)制一層對象的屬性，不會復(fù)制對象中的對象的屬性，對象的深復(fù)制會復(fù)制對象中層層嵌套的對象的屬性。本文是我在復(fù)制對象方面的一些心得總結(jié)，由淺復(fù)制到深復(fù)制，感興趣的朋友一起學(xué)習(xí)吧2017-03-03
JavaScript實(shí)現(xiàn)強(qiáng)制重定向至HTTPS頁面
這篇文章主要介紹了JavaScript實(shí)現(xiàn)強(qiáng)制重定向至HTTPS頁面,本文講解如何用JS實(shí)現(xiàn)HTTP重定向HTTPS或者HTTPS跳轉(zhuǎn)到HTTP,需要的朋友可以參考下2015-06-06
canvas簡單快速的實(shí)現(xiàn)知乎登錄頁背景效果
本篇文章主要介紹了canvas簡單快速實(shí)現(xiàn)知乎登錄頁背景效果的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05