-
无对象2020-01-01 00:00
- 19
- 0
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>
- 共 0 条
- 全部回答
-
孤舟独萍 普通会员 1楼
在JavaScript中，你可以使用for循环来展开和收缩文章中的内容。以下是一个简单的例子：
```javascript // 假设我们有一个文章数组 var articleArray = [ "这是一个段落", "这是另一个段落", "这是第三个段落" ];
// 使用for循环展开文章 for (var i = 0; i < articleArray.length; i++) { console.log(articleArray[i]); }
// 使用for循环收缩文章 for (var i = 0; i < articleArray.length; i++) { var lastElement = articleArray[i]; for (var j = i + 1; j < articleArray.length; j++) { if (j === articleArray.length - 1) { break; } console.log(articleArray[j]); } console.log(lastElement); } ```
在这个例子中，我们首先使用for循环展开文章。然后，我们使用另一个for循环收缩文章。当我们在最后一个元素后不再需要任何元素时，我们会使用break语句退出外部的for循环。在这个过程中，我们也会打印出每个元素的值。
注意，这个例子假设你的文章数组中的每个元素都是一个字符串。如果你的文章数组中的元素是其他类型的数据，你可能需要使用不同的方法来展开和收缩它们。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部