当我单击一个框的“显示更多”时，它还会显示另一个框的文本。我不知道逻辑错误在哪里，也不知道我做错了什么。我不能一次只影响一个元素。在示例中，有 2 个盒子，但它们会有更多。
var content = $('.card-text');
var moretext = "Show more ❯";
var lesstext = "Show less";
content.each(function(){
if ($(this).text().length > 83) {
$(this).addClass('truncate-ellipsis');
$(this).after( '<a href="" class="readmore-link">' + moretext + '</a>' );
}
});
$('.readmore-link').on('click', function(b){
b.preventDefault();
if(content.hasClass("truncate-ellipsis")) {
content.removeClass("truncate-ellipsis");
$(this).html(lesstext);
$(this).attr('class','readmore-link');
} else{
content.addClass("truncate-ellipsis");
$(this).html(moretext);
}
return false;
});.truncate-ellipsis{
display: block;
display: -webkit-box;
height: 60px;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.readmore-link{
color:blue;
}<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
<div class="card-block">
<h4 class="card-title">CNN</h4>
<div class="meta">
<a href="#">News1</a>
</div>
<div class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ra
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
<div class="card-block">
<h4 class="card-title">BBC</h4>
<div class="meta">
<a href="#">News 1</a>
</div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec
</div>
</div>
</div>
</div>
</body>最佳答案
在您的点击函数中，将 content 替换为 $(this).prev() 以仅引用相对的文本 block 。 content 当您在那里使用它时已经过时了，并且将引用所有文本 block 。
var content = $('.card-text');
var moretext = "Show more ❯";
var lesstext = "Show less";
content.each(function() {
if ($(this).text().length > 83) {
$(this).addClass('truncate-ellipsis');
$(this).after('<a href="" class="readmore-link">' + moretext + '</a>');
}
});
$('.readmore-link').on('click', function(b) {
b.preventDefault();
if ($(this).prev().hasClass("truncate-ellipsis")) {
$(this).prev().removeClass("truncate-ellipsis");
$(this).html(lesstext);
$(this).attr('class', 'readmore-link');
} else {
$(this).prev().addClass("truncate-ellipsis");
$(this).html(moretext);
}
return false;
});.truncate-ellipsis {
display: block;
display: -webkit-box;
height: 60px;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.readmore-link {
color: blue;
}<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
<div class="card-block">
<h4 class="card-title">CNN</h4>
<div class="meta">
<a href="#">News1</a>
</div>
<div class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ra
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
<div class="card-block">
<h4 class="card-title">BBC</h4>
<div class="meta">
<a href="#">News 1</a>
</div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec
</div>
</div>
</div>
</div>
</body>关于javascript - jQuery 点击影响另一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44681278/