第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

js點擊標簽實現(xiàn)變色，思路有點問題求指正！

js點擊標簽實現(xiàn)變色，思路有點問題求指正！

牧羊人nacy 2018-12-20 18:09:16
所有div的class相同，所有a標簽的class也相同，因為這塊數(shù)據(jù)是循環(huán)讀取的。怎么才能實現(xiàn)點擊第二個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條經(jīng)驗 獲得超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節(jié)點轉(zhuǎn)數(shù)組解決

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節(jié)點轉(zhuǎn)數(shù)組 // 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 關注
  • 925 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號