CODEWITHSUNDEEP
javascriptjquery
Bruno Andrade
Bruno Andrade

Reputation: 595

jQuery click affecting another element

When I click on "show more" of a box it also displays the text of the other box. I do not know where the logic error is or what I'm doing wrong. I can not affect only one element at a time. In the example there are 2 boxes but they will have many more.

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>

Upvotes: 1

Views: 79

Answers (2)

Nidhin Chandran
Nidhin Chandran

Reputation: 856

var content = $('.card-text'); is the issue, you should not use it globally. Inside the click function you must use another variable, something like contentCurr = $(this).prev('div.card-text');

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;
});
.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;
}
<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>

Upvotes: 0

j08691
j08691

Reputation: 207900

In your click function replace content with $(this).prev() to refer only to the relative block of text. content is stale by the time you use it there and will refer to all the blocks of text.

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>

Upvotes: 1

Related Questions