Как поэтапно показывать текст при нажатии на кнопку?

Question

[mishapsv]

Есть текст, допустим 5000 символов.
Нужно, чтобы сначала было видно только 1000 символов (и ...) и показывалась кнопка "Далее".
При нажатии на кнопку открывалось еще 1000 символов и так пока не покажется весь текст (кнопка исчезает).

Просто обрезать текст не проблема, но не получается по частям его показывать.

Answer 1

[Александр Вульф]

Жусть какая. Зачем вы используете здесь <p>? Зачем вы используете BOM названия классов вручную?

Comments

[mishapsv]

Александр Вульф вы про что? если про ссылку в комментарии, то там информация уже изменилась, нужно было отдельный пен для опытов создать, да. Методом тыка пробую реализовать.
- в этом теге будет приходить текст в html, в js я с ним ничего не делаю.

[mishapsv]

*тег p - в этом теге будет приходить текст в html, в js я с ним ничего не делаю.

[Александр Вульф]

mishapsv: если хочешь использовать теги при показе, то у тебя выйдет <div>Hello world!</di
И это придется обрабатывать. Короче, гемора там куча. Если же нужно вывести голый текст (без тегов), то там работы на 1 минуту.

[Александр Вульф]

Александр Вульф: с другой стороны, можно выводить по тегам (у тебя это параграфы). Т.е. разбиваем по ним и выводим по-одному

[Александр Вульф]

mishapsv: jsbin.com/gumabi/edit?html,js,output

[mishapsv]

Александр Вульф Спасибо!

Answer 2

[Денис Инешин]

Ну это можно сделать как то так: jsfiddle.net/dfLaqa3u

var $content = $('.content');
var $moreBtn = $('.more');

var bigText = 'Привет, какие дела? Что вообще тут вокруг происходит? Где все?';
var step = 1;
var num = 10; // длина отрезка

function getMore () {
    var textArr = bigText.split('');
    var length = num * step;
    var piece = textArr.splice(0, length);
    
    step++;
    
    if (length >= bigText.length) {
        $content.html(piece.join(''));
        $moreBtn.remove();
    } else {
    	$content.html(piece.join('') + '…'); 
    }
}

$moreBtn.on('click', getMore);

getMore(); // First piece of text

Comments

[mishapsv]

Денис Инешин спасибо! Почти то, что нужно.

Answer 3

[lega]

Вот

Comments

[mishapsv]

lega очень нетривиальное решение)

[lega]

Вот - то же самое что и у Александр Вульф только гораздо проще - даже js не нужен.

По клику увеличиваем переменную: al-click="count++"
По условию отображаем блок: al-show="count > 1"

Angular Light работает быстрее и весит меньше чем jQuery - около 15кб (передаваемых байт).

[Александр Вульф]

lega: не люблю ангулар

[lega]

Александр Вульф: а зря :)

[Александр Вульф]

lega: я 2 года с ним работал. Поверь, писать логику прям в HTML и гордо бить себя пяткой в грудь, заявляя: "ни строчки javascript" не круто :)

[lega]

Александр Вульф: > гордо бить себя пяткой в грудь, заявляя: "ни строчки javascript" не круто :)

Это не обязательно, можно просто использовать эффективный инструмент к месту.

[Александр Вульф]

lega: попробуй применить ангулар, когда у тебя более 5к строчек в списке, например. Лагать он начнет жутко. Да и куча других его особенностей превращает его в совсем не эффективный инструмент. А уж подключать его к такой маленькой задаче - вообще плохая идея.

[lega]

> когда у тебя более 5к строчек в списке
Без проблем, только зачем? при правильном построении приложения и миллион ватчей будет летать. (Кроме того Angular Light поддерживает Object.observe, хотя кому оно нужно...)

> Да и куча других его особенностей превращает его в совсем не эффективный инструмент.
Это справедливо для Angular.js, а Angular Light - это маленькая библиотека без сервисов, фабрик, модулей и прочей шелухи.
Там (только) диреткивы и биндинг, так что под эту задачу - самое то, тем более она легче чем jQuery, ~15kb.

[Александр Вульф]

lega: да, про Light не знал, спасибо. Однако, под эту задачу вообще фреймворков/библиотек не надо! Она же на 10 строчек.