Блог

Главная - Вопросы по программированию - Как изменить текст ссылки при нажатии с помощью jQuery?

Как изменить текст ссылки при нажатии с помощью jQuery?

#html #jquery #css

#HTML #jquery #css

Вопрос:

Вот мой codepen, чтобы увидеть, где я нахожусь. Я хочу, чтобы «читать больше» менялось на «читать меньше», когда div расширяется, а затем обратно на «читать больше», когда он закрывается, и т.д.

Я подумал, может быть, проверить, есть ли в .expand-btn class .view, а затем выполнить условие для изменения innerHTML, но мне не очень повезло, может быть, я просто делаю это неправильно.

Любая помощь будет оценена.

 $(".expand-container").each(function() {
  var _this = $(this);
  _this.find("a").click(function() {
    _this.find(".expand-text").toggleClass('expand');
    _this.find(".expand-btn").toggleClass('view');
  });

  if (_this.find(".expand-btn").hasClass("view")) {

  }
});  
 .col {
  width: 20rem;
}

.expand {
  max-height: 900px !important;
}

.expand-container {
  position: relative;
  width: 100%;
  height: auto;
}

.expand-text {
  position: relative;
  height: auto;
  max-height: 45px;
  overflow: hidden;
  transition: ease-in-out 0.25s;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <h2>title1</h2>
  <div class="expand-container">
    <p class="expand-text">
      Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet
      nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt.
    </p>
    <a href="javascript:;" class="expand-btn">Read more</a>
  </div>
</div>

Ответ №1:

Вы можете сделать это следующим образом:

 _this.find(".expand-btn").text((_this.find(".expand-btn").text() == "Read more" ? "Read less":"Read more"))

Чтобы лучше понять приведенный выше код, вы можете прочитать приведенный ниже пример.

 if(_this.find(".expand-btn").text() == "Read more") {
   _this.find(".expand-btn").text("Read less")
} else {
   _this.find(".expand-btn").text("Read more")
}

ДЕМОНСТРАЦИЯ

 $(".expand-container a").click(function() {
  var _this = $(this);
  _this.prev(".expand-text").toggleClass('expand');
  _this.text((_this.text() == "Read more" ? "Read less" : "Read more")).toggleClass('view');
  _this.next('img').attr("src", _this.next('img').attr("src") == 'https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-up-thin.png' ? "https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-down-thin.png" : "https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-up-thin.png")
});  
 .col {
  width: 20rem;
}

.expand {
  max-height: 900px !important;
}

.expand-container {
  position: relative;
  width: 100%;
  height: auto;
}

.expand-text {
  position: relative;
  height: auto;
  max-height: 45px;
  overflow: hidden;
  transition: ease-in-out 0.25s;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <h2>title1</h2>
  <div class="expand-container">
    <p class="expand-text">
      Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet
      nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt.
    </p>
    <a href="javascript:;" class="expand-btn">Read more</a><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-down-thin.png" style="height:10px;width:10px;" />
  </div>
</div>

Комментарии:

1. Спасибо тебе за твой ответ, Карстен. Последний вопрос… можно ли добавить img в конце «читать больше» и «читать меньше»? Я просто хочу добавить стрелку вверх / вниз

2. @birdyoung да, это возможно, но я считаю, что было бы лучше, если бы вы использовали что-то вроде font-awesome или другую библиотеку. тогда вам не нужно загружать изображения. вот так https://fontawesome.com/icons/arrow-up . Но вы можете, если хотите, использовать изображения, если вы предпочитаете.

3. Это определенно упростило бы жизнь… к сожалению, в дизайне веб-сайта есть изображения, которые мне нужно использовать. Я знаю, что это сработает при использовании innerHTML, но не уверен, как включить это в ваше решение.

4. Потрясающий Карстен. Спасибо, что нашли время помочь мне, я действительно ценю это.

Ответ №2:

Нет необходимости в «каждом»

Я не вижу класс «просмотр», поэтому я пока проигнорировал это

При необходимости добавьте .toggleClass('view'); в конец $(this).text($text.hasClass("expand") ? "Read less" : "Read more") 

 $(".expand-container").on("click","a",function(e) {
  e.preventDefault(); // cancel click
  const $text = $(this).prev(); // or  $(this).closest("div").find(".expand-text");
  $text.toggleClass('expand');
  $(this).text($text.hasClass("expand") ? "Read less" : "Read more")
});  
 .col {
  width: 20rem;
}

.expand {
  max-height: 900px !important;
}

.expand-container {
  position: relative;
  width: 100%;
  height: auto;
}

.expand-text {
  position: relative;
  height: auto;
  max-height: 45px;
  overflow: hidden;
  transition: ease-in-out 0.25s;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <h2>title1</h2>
  <div class="expand-container">
    <p class="expand-text">
      Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet
      nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt.
    </p>
    <a href="#" class="expand-btn">Read more</a>
  </div>
</div>

Ответ №3:

 if($('.expand-btn').text() === "Read More")
{ $('.expand-btn').text('Read Less') }
else if($('.expand-btn').text() === "Read Less")
{$('.expand-btn').text('Read More')}

Вы должны использовать это для изменения текста на кнопке при нажатии кнопки.

Комментарии:

1. Пожалуйста, постарайтесь придерживаться принципа DRY — не повторяйтесь

2. const $but = $('.expand-btn'); $but.text($but.text() === "Read More" : "Read Less" : 'Read More')