文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >影响另一个元素的jQuery单击

问影响另一个元素的jQuery单击
EN

Stack Overflow用户
提问于 2017-06-22 00:12:12
回答 2查看 54关注 0票数 1

当我点击一个框的“显示更多”时，它也会显示另一个框的文本。我不知道逻辑错误在哪里，也不知道我做错了什么。我不能一次只影响一个元素。在这个例子中有2个盒子，但它们会有更多的盒子。

​

代码语言：javascript
复制
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;

  });
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

jquery
javascript
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-06-22 00:18:06

在单击函数中，将content替换为$(this).prev()，以便只引用相对的文本块。当您在那里使用content时，它已经过时了，它将引用所有的文本块。

​

代码语言：javascript
复制
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;
});
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2017-06-22 00:29:32

var content = $('.card-text');才是问题所在，你不应该全局使用它。在单击函数中，您必须使用另一个变量，如contentCurr = $(this).prev('div.card-text');

​

代码语言：javascript
复制
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();
  contentCurr = $(this).prev('div.card-text');
  console.log('dsd',contentCurr);
  if (contentCurr.hasClass("truncate-ellipsis")) {
    contentCurr.removeClass("truncate-ellipsis");
    $(this).html(lesstext);
    $(this).attr('class', 'readmore-link');
  } else {
    contentCurr.addClass("truncate-ellipsis");
    $(this).html(moretext);
  }
  return false;
});
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44681278

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档