js實(shí)現(xiàn)點(diǎn)擊每個(gè)li節(jié)點(diǎn)，都彈出其文本值及修改

更新時(shí)間：2016年12月15日 11:17:02 作者：小僵尸

本篇文章主要分享了js實(shí)現(xiàn)點(diǎn)擊每個(gè)li節(jié)點(diǎn)，都彈出其文本值及修改的實(shí)例代碼，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧

點(diǎn)擊每個(gè)li節(jié)點(diǎn)，都彈出其文本值

1，獲取所有的li節(jié)點(diǎn)

var liNodes=document.GetElementsByTagName("li");

2，使用for循環(huán)進(jìn)行遍歷，得到每一個(gè)li節(jié)點(diǎn)

for(var i=0;i<liNodes.length;i++){
alert(i);
}

3，為每一個(gè)li節(jié)點(diǎn)添加onclick響應(yīng)函數(shù)

liNodes[i].onclick=function(){ }

4，在響應(yīng)函數(shù)中獲取當(dāng)前節(jié)點(diǎn)的文本值

this 為正在響應(yīng)事件的那個(gè)節(jié)點(diǎn)

alert(this.firstChild.nodeValue);

點(diǎn)擊每個(gè)li節(jié)點(diǎn)，若li節(jié)點(diǎn)的文本值沒(méi)有^^開(kāi)頭，加上；有，則去除

var liNodes=document.getElementsByTagName("li");//獲取
for(var i=0;i<liNodes.length;i++){//遍歷
liNodes[i].onclick=function(){//響應(yīng)
var val=this.firstChild.nodeValue;
var reg=/^\^{2}/g;//全局正則
if(reg.test(val)){//判斷
　　val=val.replace(reg,"");
　　}
else{
　　　val="^^"+val;　
}
firstChild.nodeValue=val;
　　}

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

js
li

相關(guān)文章

js實(shí)現(xiàn)防止用戶重復(fù)點(diǎn)擊的三種方法
本文主要介紹了js實(shí)現(xiàn)防止用戶重復(fù)點(diǎn)擊的三種方法,包括通過(guò)禁用按鈕、解綁點(diǎn)擊事件和使用標(biāo)記,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-02-02
d3.js入門(mén)教程之?dāng)?shù)據(jù)綁定詳解
這篇文章主要介紹了關(guān)于d3.js數(shù)據(jù)綁定的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)只d3.js具有一定的參考價(jià)值，需要的朋友下面來(lái)一起看看吧。
2017-04-04
前端webpack一些常用配置的作用詳解
在前端開(kāi)發(fā)中Webpack已經(jīng)成為構(gòu)建現(xiàn)代JavaScript應(yīng)用的必備工具,它負(fù)責(zé)模塊的打包和優(yōu)化,這篇文章主要介紹了前端webpack一些常用配置的作用,文中介紹的非常詳細(xì),需要的朋友可以參考下
2025-04-04
VSCode Webview中實(shí)現(xiàn)點(diǎn)擊下載圖片的基本流程
這篇文章主要介紹了VSCode Webview中如何實(shí)現(xiàn)點(diǎn)擊下載圖片,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
Bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)(1)
這篇文章主要為大家詳細(xì)介紹了bootstrap學(xué)習(xí)筆記之css樣式設(shè)計(jì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-06-06
JS模擬鍵盤(pán)打字效果的方法
這篇文章主要介紹了JS模擬鍵盤(pán)打字效果的方法,涉及javascript鼠標(biāo)事件及字符串操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
javascript實(shí)現(xiàn)下雨效果
本文主要介紹了javascript實(shí)現(xiàn)下雨效果的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
JS禁用右鍵、禁用Ctrl+u、禁用Ctrl+s、禁用F12的實(shí)現(xiàn)代碼
最近項(xiàng)目需要屏蔽客戶端的一些操作，加大查看源碼等難度，特整理一下這個(gè)js，也防止客戶端用戶誤操作，破解方放也很簡(jiǎn)單這里就不多說(shuō)了
2020-10-10
JavaScript實(shí)現(xiàn)密碼框驗(yàn)證信息
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)密碼框驗(yàn)證信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
javascript實(shí)現(xiàn)漂亮的拖動(dòng)層，窗口拖拽特效
一個(gè)可關(guān)閉、可隨意拖動(dòng)位置的網(wǎng)頁(yè)彈出層代碼，美化的相當(dāng)漂亮，簡(jiǎn)潔實(shí)用，還可拖動(dòng)改變大小，通過(guò)八個(gè)方向改變大小，學(xué)習(xí)這類(lèi)特效編寫(xiě)的網(wǎng)頁(yè)設(shè)計(jì)者可參閱一下
2015-04-04