Как сделать кнопку 'Далее', чтобы она появлялась при определенном количестве слов?

#jquery #button

Всем привет.
Ребят, у меня вопрос, я задал размеры блоку height: 150; width: 250;
Когда человек оставляет комментарий не более 25 слов, необходимо, чтобы текст находился
только в том блоке,  а если комментарий больше 25 слов, то появляется кнопка "Читать
далее" и показывался остальной текст.  При уводе мышки, куда-нибудь этот блок должен
закрываться.

Помогите плиз, спасибо)
    

Ответы

Ответ 1

Пусть не смущает количество кода - это только для визуальной составляющей, и может
быть сокращено, в соответствии с задачами.



$(window).load(function() {
  $('.comment_wrap').each(function(index) {
    let $this = $(this);
    let $comment_over = $this.children('.comment_over');
    let $comment_area = $this.children('.comment_area');
    let $comment_head = $this.children('.comment_head');

    function fNumberWords(oElem) {
      $comment_head.text('Количество слов: ' + oElem.text().split(' ').length);
      return oElem.text().split(' ').length
    }
    (fNumberWords($comment_area) > 25) ? $comment_over.show(): $comment_over.hide();
    
    $comment_over.on('click', function(ev) {
      $this.css('height', 'auto');
      $comment_over.hide(500);
    });
    $this.on({
      mouseleave: function(ev) {
        $this.css('height', '150px');
        (fNumberWords($comment_area) > 25) ? $comment_over.show(): $comment_over.hide();
      },
      input: function(ev) {
        $this.css('height', 'auto');
        $comment_over.hide();
        fNumberWords($comment_area);
      }
    });
  });
});
* {
  box-sizing: border-box;
}
.comment_wrap {
  position: relative;
  float: left;
  margin: 2px;
  width: 250px;
  height: 150px;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 1px 2px 4px #aaa;
}
.comment_head {
  padding: 5px;
  background: #ddd;
  border: 1px solid #ccc;
}
.comment_area {
  padding: border: 1px solid #ccc;
  min-height: 100%;
  padding: 8px;
  outline: none;
  text-align: justify;
  box-shadow: inset 0px 1px 8px #444;
}
.comment_over {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 1px 5px;
  cursor: pointer;
  background: #fff;
  text-shadow: 1px 2px 3px #000;
  box-shadow: -1px -1px 30px 15px #fff;
}
.comment_over:hover {
  text-shadow: 0px 0px 1px #000;
}



  

  

    Здесь, в этом блоке, количество слов больше двадцати пяти, поэтому кнопка спойлера
видна. Вы можете отредактировать текст прямо в поле, проследить за изменениями и понять
логику скрипта.
  
  
Читать далее


В этом блоке слов меньше, чем 25, потому кнопка спойлера не появляется.
Но, всегда можно дописать нужное количество слов.
Читать
далее

Количество блоков может быть любым. Их поведение будет одинаковым.
Главное - сохранить разметку.
Читать далее





  Лучше смотреть развернув страницу.