Динамически разделить p в диапазоне, jquery

Я пишу некоторые функции чтения больше/меньше для текста, но столкнулся со следующей проблемой.

Мои шаги: 1) получение содержимого текста, содержащего div, с несколькими абзацами.

    var content =  $heroContent.html();

2) Я делаю подстроку той части, которая всегда показывается, а вторую подстроку полного текста - той части, которая всегда показывается, то есть собственно скрытой части. (эту скрытую часть можно будет показать или скрыть, нажав кнопку)

c = content.substr(0, 700)
h = content.substr(700, content.length - roundedLimit)

3) Я поместил вторую часть в диапазон с классом morecontent, чтобы я мог скрыть этот контент и показать его.

html = c + "<span class='morecontent'>" + h + "</span>";

4) Я снова добавляю переменную html выше в свой div с текстом и скрываю «больше контента».

Причина помещения текста в диапазон заключается в том, что его можно поместить в строку с текстом до того места, где он разбивается. Если не в диапазоне, текст просто появляется в строке ниже, что нежелательно.

Проблема: вторая подстрока h может состоять из нескольких абзацев. Таким образом, когда тег P закрывается внутри переменной h, тег span также автоматически закрывается, следовательно, класс morecontent применяется только к началу диапазона до конца первого абзац внутри.

Я попытался исправить это, поместив текст в DIV, но тогда текст не отображается встроенным, и это действительно важная «функция».

Если бы кто-нибудь мог дать мне решение этой проблемы, это было бы здорово!


html jquery substring paragraph
person Decor    schedule 28.03.2013    source источник
comment
У вас есть возможность играть с контейнером? Что-то вроде получения фиксированной высоты с помощью overflow: hidden и, в конечном итоге, открывания контейнера, когда кто-то хочет прочитать все. Немного похоже на описание фильма на ютубе...   -  person Tallmaris    schedule 28.03.2013
comment
Это звучит как более логичное решение, чем то, что я делал :). Спасибо! Однако я должен попытаться найти способ помнить о высоте строки, чтобы не обрезать контейнер посередине строки. Спасибо!   -  person Decor    schedule 28.03.2013
comment
Мне нравится добавлять мягкую тень (выше) к линии отсечки, чтобы мне не приходилось беспокоиться о том, что она разрезает линию пополам, эффект приятный, а намек на доступность большего количества текста очень тонкий и эффективный.   -  person Tallmaris    schedule 28.03.2013
comment
Я попробую, но не уверен, что это впишется в текущий дизайн. Но в других случаях это может помочь решить проблему!   -  person Decor    schedule 28.03.2013

Ответы (2)


arrow_upward
1
arrow_downward

Вот решение, которое упаковывает содержимое в контейнер и использует кнопку «больше/меньше», чтобы расширить/сжать контейнер для отображения содержимого:

var content = $('.content').wrapInner('<div class="moreless less">');

$('.moreless').after('<div class="showbutton"><span>More</span><span class="hidden">Less</span></div>');

$('.content').on('click', '.showbutton', function() {
   $(this).prev('.moreless').toggleClass('less');
   $(this).find('span').toggleClass('hidden');
});

CSS:

.content {
    line-height: 20px;
}

.less {
    max-height: 100px;
    overflow: hidden;
}

.hidden {
     display: none;   
}

http://jsfiddle.net/rrvtw/

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

person Jeff B    schedule 28.03.2013
comment
Поскольку мой код уже немного более продвинутый, и нужно учитывать гораздо больше вещей, приведенный выше пример нельзя использовать напрямую, но это очень полезное руководство, чтобы понять, как работать! Спасибо! - person Decor; 28.03.2013

arrow_upward
0
arrow_downward

Еще одним быстрым способом может быть сохранение короткой и длинной версии, а не первой и второй части, и нажатием кнопки просто переключаться между ними:

var content =  $heroContent.html();
c = content.substr(0, 700)

html = "<div class='short'>" + c + "</div>" + 
       "<div class='all'>" + content + "</div>";

mybutton.toggle() -> $('.short').hide();
                     $('.all').show(); // and viceversa on second click.

Как это звучит?

person Tallmaris    schedule 29.03.2013
comment
Звучит действительно неплохо! Но должен быть переход между двумя состояниями, чтобы вы действительно видели, как текст скользит вниз и вверх. - person Decor; 30.03.2013