问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js做文章展开收缩时for循环的问题

头像
COMICO
    59620

    demo要求是点击显示全文时，当前的段落显示全文。最多同时只有一个段落能是显示全文的状态。
    但发现一点击时所有段落都会变成第二个段落的内容。
    变量bb是for循环里的变量。值应该是不同的。但是经测试，bb在两处输出的结果不一样。第二处输出的2个值都是相同的，都是第二个段落的内容。不知道是怎么回事。
    <!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">关玉明（成龙饰）年轻时打过越战，当过特种兵。但如今，他敛尽锋芒，在英国伦敦唐人街开了一家小餐馆，与女儿（梁佩诗饰）相依为命。在一次恐怖袭击中，女儿不幸遇难。英国有关部门的不作为更使他悲愤莫名，这时，关键人物莱姆·汉尼斯（皮尔斯·布鲁斯南饰）出现在他的视野之中。曾经在战争中出生入死的经验，让关玉明敏锐地察觉，汉尼斯手中一定有此次恐怖袭击的资料。于是，关玉明几次登门请求汉尼斯为自己提供线索，但遭到汉尼斯的拒绝。万念俱灰的关玉明决定用自己的方式为女儿报仇雪恨。为此，他拒绝了爱人林宝怡（刘涛饰）的挽留，独自踏上向恐怖组织以牙还牙以血还血的复仇之路。但他并不知道的是，一个错综复杂的大阴谋正在他面前徐徐展开。</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">查理（爱德华·霍尔克罗夫特饰）袭击了艾格西（塔伦·埃格顿饰），艾格西成功逃脱，并且赶上了自己女友瑞典公主蒂尔德（汉娜·阿尔斯托姆饰）的生日派对。但是在逃脱过程中，艾格西遗落下了查理被砍下的电子手，上面有着所有现役特工们的地址。</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个不同的结果.
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);在这里搜索的结果是相同的值,都是第二段描述.
        }
        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>

    javascript
    阅读 2.2k
    1 个回答
    得票最新
    头像
    Donle
      1.4k1113
      ✓ 已被采纳

      异步问题，还有for循环全都是i，调用不清

      使用let解决异步调用

      <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);在这里搜索的结果是相同的值,都是第二段描述.
                }
                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);在这里搜索的结果是相同的值,都是第二段描述.
                    }
                    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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题