鍍金池/ 問答/HTML/ js做文章展開收縮時(shí)for循環(huán)的問題

js做文章展開收縮時(shí)for循環(huán)的問題

demo要求是點(diǎn)擊顯示全文時(shí)，當(dāng)前的段落顯示全文。最多同時(shí)只有一個(gè)段落能是顯示全文的狀態(tài)。
但發(fā)現(xiàn)一點(diǎn)擊時(shí)所有段落都會變成第二個(gè)段落的內(nèi)容。
變量bb是for循環(huán)里的變量。值應(yīng)該是不同的。但是經(jīng)測試，bb在兩處輸出的結(jié)果不一樣。第二處輸出的2個(gè)值都是相同的，都是第二個(gè)段落的內(nèi)容。不知道是怎么回事。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/清零開始/
*{margin: 0;padding: 0;}
body{background-color: #fff;font-size: 13px;color: #333;font-family: "微軟雅黑";}
a{text-decoration: none;color: #909090;}
.box{

width: 500px;
border: 1px solid #ebebeb;
margin:0 auto;
margin-bottom: -1px;

}
.box .title{

font-size: 20px;
font-weight: bold;

}
</style>
</head>
<body>

<div class="box">
    <p class="title">英倫對決</p>
    <p class="date">12月7日 12:30 來自 微博weibo.com</p>
    <span class="derc">關(guān)玉明（成龍飾）年輕時(shí)打過越戰(zhàn)，當(dāng)過特種兵。但如今，他斂盡鋒芒，在英國倫敦唐人街開了一家小餐館，與女兒（梁佩詩飾）相依為命。在一次恐怖襲擊中，女兒不幸遇難。英國有關(guān)部門的不作為更使他悲憤莫名，這時(shí)，關(guān)鍵人物萊姆·漢尼斯（皮爾斯·布魯斯南飾）出現(xiàn)在他的視野之中。曾經(jīng)在戰(zhàn)爭中出生入死的經(jīng)驗(yàn)，讓關(guān)玉明敏銳地察覺，漢尼斯手中一定有此次恐怖襲擊的資料。于是，關(guān)玉明幾次登門請求漢尼斯為自己提供線索，但遭到漢尼斯的拒絕。萬念俱灰的關(guān)玉明決定用自己的方式為女兒報(bào)仇雪恨。為此，他拒絕了愛人林寶怡（劉濤飾）的挽留，獨(dú)自踏上向恐怖組織以牙還牙以血還血的復(fù)仇之路。但他并不知道的是，一個(gè)錯(cuò)綜復(fù)雜的大陰謀正在他面前徐徐展開。</span>
    <a href="#" class="btn">顯示全文</a>
</div>
<div class="box">
    <p class="title">王牌特工2：黃金圈</p>
    <p class="date">12月7日 12:30 來自 微博weibo.com</p>
    <span class="derc">查理（愛德華·霍爾克羅夫特飾）襲擊了艾格西（塔倫·埃格頓飾），艾格西成功逃脫，并且趕上了自己女友瑞典公主蒂爾德（漢娜·阿爾斯托姆飾）的生日派對。但是在逃脫過程中，艾格西遺落下了查理被砍下的電子手，上面有著所有現(xiàn)役特工們的地址。</span>
    <a href="#" class="btn">顯示全文</a>
</div>

</body>
<script>
var btn=document.getElementsByClassName('btn');
var derc=document.getElementsByClassName('derc');

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

var aa=derc[i].innerHTML;
var bb=derc[i].innerHTML.substring(0, 70)+"...";

derc[i].innerHTML = bb;

// console.log(bb);在這里輸出bb是正常的,2個(gè)不同的結(jié)果.
btn[i].index=i;


btn[i].onclick=function(){
    if(this.innerHTML=="顯示全文"){
        for (var i = 0; i < derc.length; i++) {
            derc[i].innerHTML=bb;
            btn[i].innerHTML="顯示全文";
            //console.log(bb);在這里搜索的結(jié)果是相同的值,都是第二段描述.
        }
        derc[this.index].innerHTML=aa;
        this.innerHTML="收起";
    }
    else{
        for (var i = 0; i < derc.length; i++) {
            derc[i].innerHTML=bb;
            btn[i].innerHTML="顯示全文";
        }
    }
}

}

</script>
</html>

回答
編輯回答
夢囈

異步問題，還有for循環(huán)全都是i，調(diào)用不清

使用let解決異步調(diào)用

<script>
    let btn = document.getElementsByClassName('btn');
    let derc = document.getElementsByClassName('derc');

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

        let aa = derc[i].innerHTML;
        let bb = derc[i].innerHTML.substring(0, 70) + "...";

        derc[i].innerHTML = bb;

        btn[i].index = i;


        btn[i].onclick = function () {
            if (this.innerHTML == "顯示全文") {

                for (let j = 0; j < derc.length; j++) {
                    if (j === i) continue;
                    derc[j].innerHTML = derc[j].innerHTML.substring(0, 70) + "...";
                    btn[j].innerHTML = "顯示全文";
                    //console.log(bb);在這里搜索的結(jié)果是相同的值,都是第二段描述.
                }
                derc[i].innerHTML = aa;
                this.innerHTML = "收起";
            } else {
                for (let j = 0; j < derc.length; j++) {
                    derc[j].innerHTML = derc[j].innerHTML.substring(0, 70) + "...";;
                    btn[j].innerHTML = "顯示全文";
                }
            }
        }
    }
</script>

或者加閉包

<script>
    var btn = document.getElementsByClassName('btn');
    var derc = document.getElementsByClassName('derc');

    for (var i = 0; i < btn.length; i++) {
        (function(x){
            var aa = derc[x].innerHTML;
            var bb = derc[x].innerHTML.substring(0, 70) + "...";

            derc[x].innerHTML = bb;

            btn[x].onclick = function () {
                if (this.innerHTML == "顯示全文") {

                    for (var j = 0; j < derc.length; j++) {
                        if (j === x) continue;
                        derc[j].innerHTML = derc[j].innerHTML.substring(0, 70) + "...";
                        btn[j].innerHTML = "顯示全文";
                        //console.log(bb);在這里搜索的結(jié)果是相同的值,都是第二段描述.
                    }
                    derc[x].innerHTML = aa;
                    this.innerHTML = "收起";
                } else {
                    for (var j = 0; j < derc.length; j++) {
                        derc[j].innerHTML = derc[j].innerHTML.substring(0, 70) + "...";;
                        btn[j].innerHTML = "顯示全文";
                    }
                }
            }
        })(i);
    }
</script>
2018年8月29日 23:22