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

139
11 февраля 2019, 06:20

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

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

Answer 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; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="comment_wrap"> 
  <div class="comment_head"></div> 
  <div class="comment_area" contenteditable> 
    Здесь, в этом блоке, количество слов больше двадцати пяти, поэтому кнопка спойлера видна. Вы можете отредактировать текст прямо в поле, проследить за изменениями и понять логику скрипта. 
  </div> 
  <div class="comment_over">Читать далее</div> 
</div> 
 
<div class="comment_wrap"><div class="comment_head"></div><div class="comment_area" contenteditable>В этом блоке слов меньше, чем 25, потому кнопка спойлера не появляется. Но, всегда можно дописать нужное количество слов.</div><div class="comment_over">Читать далее</div></div> 
 
<div class="comment_wrap"><div class="comment_head"></div><div class="comment_area" contenteditable>Количество блоков может быть любым. Их поведение будет одинаковым. Главное - сохранить разметку.</div><div class="comment_over">Читать далее</div></div>

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

READ ALSO
Смена атрибутов

Смена атрибутов

Есть какие-то блоки и какие-то атрибуты, допустим вот так:

151
создание jquery плагина используя react

создание jquery плагина используя react

Есть задача - создание дополнительного функционала для легаси-кода написанного на jqueryНа сколько приемлемо вообще создание jquery-плагина используя...

126