首頁猿問 js點擊標簽實現變色，思路有點問題...

js點擊標簽實現變色，思路有點問題求指正！

JavaScript

牧羊人nacy 2018-12-20 18:09:16

所有div的class相同，所有a標簽的class也相同，因為這塊數據是循環讀取的。怎么才能實現點擊第二個div然后對應第二個a標簽的字體變成紅色，第三個div對應第三個a標簽這樣。<style>.on{ background-color:#f00;}</style> <div class="this_img" onMouseOver="img()">1 </div> <div class="this_img" onMouseOver="img()">2 </div> <div class="this_img" onMouseOver="img()">3 </div> <div class="this_img" onMouseOver="img()">4 </div> <div class="this_img" onMouseOver="img()">5 </div> <a class="s_img">aa</a> <a class="s_img">ab</a> <a class="s_img">ac</a> <a class="s_img">ad</a> <a class="s_img">ae</a><script>function img(){ var this_img=document.getElementsByClassName('this_img'); var s_img=document.getElementsByClassName('s_img'); for(var i=0;i<this_img.length;i++){ this_img[i].onclick =function(){ this.className='on'; s_img[i].style.color="red"; }; } }</script>

查看完整描述

1 回答

倚天杖

TA貢獻1828條經驗獲得超3個贊

// 1、ES6 let解決

function img(){

var this_img = document.getElementsByClassName('this_img');

var s_img=document.getElementsByClassName('s_img');

for(let i=0;i<this_img.length;i++){

this_img[i].addEventListener("click", function(){

this.className='on';

s_img[i].style.color="red";

}, false);

}

// 2、閉包解決

function img(){

var this_img = document.getElementsByClassName('this_img');

var s_img=document.getElementsByClassName('s_img');

for(var i=0;i<this_img.length;i++){

(function(i){

this_img[i].addEventListener("click", function(){

this.className='on';

s_img[i].style.color="red";

}, false);

})(i);

}

// 3、ES5或ES6將DOM節點轉數組解決

function img(){

var this_img = document.getElementsByClassName('this_img');

var s_img=document.getElementsByClassName('s_img');

var nodes = [].slice.call(this_img); // 也可以用ES6的Array.from將DOM節點轉數組 // var nodes = Array.from(this_img);

nodes.forEach(function(node,index) {

node.addEventListener("click", function(){

node.className='on';

s_img[index].style.color="red";

}, false);

});

}

// 4、或者前面兩個答案提供的方案

function img(){

var this_img = document.getElementsByClassName('this_img');

var s_img=document.getElementsByClassName('s_img');

for(var i=0;i<this_img.length;i++){

this_img[i].index = i;

this_img[i].onclick =function(){

this.className='on';

s_img[this.index].style.color="red";

};

}

反對回復 2019-01-19

1 回答
0 關注
907 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

js點擊標簽實現變色，思路有點問題求指正！

js點擊標簽實現變色，思路有點問題求指正！

1 回答

添加回答

js點擊標簽實現變色，思路有點問題求指正！

js點擊標簽實現變色，思路有點問題求指正！