Читать дальше после x символов JavaScript

1

Я хочу показать только 300 символов в абзаце, ниже - код, который используется, чтобы скрыть/показать полный текст, что я должен сделать, чтобы он отображал только 300 символов, а затем показывать полный текст, когда пользователь нажимает кнопку "показать больше"?

Файл TPL:

<div id="tab-description">
<div id="more-1" class="fulltext">
<p><?php echo $description; ?></p>
</div>
<button aria-expanded="false" aria-controls="more-1" class="toggle-content" hidden><span class="text">Show more</span></button>
</div>

JavaScript:

if ('querySelector' in document && 
'addEventListener' in window) {

var toggleButtons = document.querySelectorAll('.toggle-content');
var fullTextWrappers = document.querySelectorAll('.fulltext');
var fullText;
var toggleButtonText;


[].forEach.call(fullTextWrappers, function(fullTextWrapper) {
    // hide all full text on load
    fullTextWrapper.setAttribute('hidden', true);
});

[].forEach.call(toggleButtons, function(toggleButton) {
    // show toggle more buttons
    toggleButton.removeAttribute('hidden');

    // add listener for each button
    toggleButton.addEventListener('click', function () {

        fullTextWrapper = this.parentElement.querySelector('.fulltext');
        toggleButtonText = this.querySelector('.text');

        // change attributes and text if full text is shown/hidden
        if (!fullTextWrapper.hasAttribute('hidden')) {
            toggleButtonText.innerText = 'Show More';
            fullTextWrapper.setAttribute('hidden', true);
            toggleButton.setAttribute('aria-expanded', false);
        } else {
            toggleButtonText.innerText = 'Show Less';
            fullTextWrapper.removeAttribute('hidden');
            toggleButton.setAttribute('aria-expanded', true);
        }
});
});
}
Теги:

2 ответа

0
Лучший ответ

То, что я сделаю, будет разделено на каждую букву, а затем соединить первые 300 предметов.

let para = p.textContent.split('')
let first300 = para.splice(0, 300)

Вот пример использования:

// Get the div content
Array.from(document.querySelectorAll('div')).forEach(div => {
  let para = div.textContent.split('')
  let first300 = para.splice(0, 300)

  div.innerHTML = '<p>${first300.join('')}<span class="hidden">${para.join('')}</span></p><p><a href="" class="more">Show More/Less...</a></p>'

  div.querySelector('.more').addEventListener('click', function(e) {
    e.preventDefault()
    this.closest('div').querySelector('p span:last-child').classList.toggle('hidden')
  })
})
.hidden { display:none; }
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum dui odio, et gravida felis ultricies in. Etiam rutrum eros eget vulputate eleifend. Donec dictum, lectus sit amet dictum porta, tortor nisi rhoncus velit, sit amet viverra massa dolor vitae quam. Aliquam interdum purus sed rutrum mattis. Phasellus enim massa, placerat sed porttitor ac, porta in lacus. Etiam vehicula maximus blandit. Donec gravida est ut leo cursus sagittis. Sed tempus maximus aliquet. Mauris tempus magna lacus. Maecenas id nunc sem. Cras feugiat nunc in nibh consequat, at blandit erat sagittis. Nam rhoncus fringilla ante eget consectetur. Morbi volutpat, arcu ut ultrices posuere, ipsum neque mattis mi, non eleifend mi mi in nunc. Nullam sodales gravida orci a imperdiet. Donec facilisis rutrum pharetra. Fusce efficitur erat sed aliquam lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nisl eros, finibus vitae congue ac, rhoncus non enim. Sed interdum vehicula luctus. Nam lorem velit, feugiat at nunc sed, luctus dignissim lacus. Cras risus lorem, ornare nec mauris eu, scelerisque tincidunt mauris. Donec ac accumsan diam, at molestie turpis. Nam nec placerat orci. In sem libero, egestas nec magna id, scelerisque consectetur mauris. Sed finibus faucibus mauris eget vestibulum. Aenean nec odio viverra, euismod sem sed, interdum ante. Donec sit amet mauris et lacus ultrices feugiat suscipit in lectus. Aliquam fermentum euismod tellus, sed volutpat velit luctus id. In quis tortor odio. Cras tincidunt, nisi ut fringilla euismod, tortor arcu placerat sem, et dignissim sem quam eu enim. Duis vitae ante in erat dapibus malesuada.</div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum dui odio, et gravida felis ultricies in. Etiam rutrum eros eget vulputate eleifend. Donec dictum, lectus sit amet dictum porta, tortor nisi rhoncus velit, sit amet viverra massa dolor vitae quam. Aliquam interdum purus sed rutrum mattis. Phasellus enim massa, placerat sed porttitor ac, porta in lacus. Etiam vehicula maximus blandit. Donec gravida est ut leo cursus sagittis. Sed tempus maximus aliquet. Mauris tempus magna lacus. Maecenas id nunc sem. Cras feugiat nunc in nibh consequat, at blandit erat sagittis. Nam rhoncus fringilla ante eget consectetur. Morbi volutpat, arcu ut ultrices posuere, ipsum neque mattis mi, non eleifend mi mi in nunc. Nullam sodales gravida orci a imperdiet. Donec facilisis rutrum pharetra. Fusce efficitur erat sed aliquam lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nisl eros, finibus vitae congue ac, rhoncus non enim. Sed interdum vehicula luctus. Nam lorem velit, feugiat at nunc sed, luctus dignissim lacus. Cras risus lorem, ornare nec mauris eu, scelerisque tincidunt mauris. Donec ac accumsan diam, at molestie turpis. Nam nec placerat orci. In sem libero, egestas nec magna id, scelerisque consectetur mauris. Sed finibus faucibus mauris eget vestibulum. Aenean nec odio viverra, euismod sem sed, interdum ante. Donec sit amet mauris et lacus ultrices feugiat suscipit in lectus. Aliquam fermentum euismod tellus, sed volutpat velit luctus id. In quis tortor odio. Cras tincidunt, nisi ut fringilla euismod, tortor arcu placerat sem, et dignissim sem quam eu enim. Duis vitae ante in erat dapibus malesuada.</div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum dui odio, et gravida felis ultricies in. Etiam rutrum eros eget vulputate eleifend. Donec dictum, lectus sit amet dictum porta, tortor nisi rhoncus velit, sit amet viverra massa dolor vitae quam. Aliquam interdum purus sed rutrum mattis. Phasellus enim massa, placerat sed porttitor ac, porta in lacus. Etiam vehicula maximus blandit. Donec gravida est ut leo cursus sagittis. Sed tempus maximus aliquet. Mauris tempus magna lacus. Maecenas id nunc sem. Cras feugiat nunc in nibh consequat, at blandit erat sagittis. Nam rhoncus fringilla ante eget consectetur. Morbi volutpat, arcu ut ultrices posuere, ipsum neque mattis mi, non eleifend mi mi in nunc. Nullam sodales gravida orci a imperdiet. Donec facilisis rutrum pharetra. Fusce efficitur erat sed aliquam lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nisl eros, finibus vitae congue ac, rhoncus non enim. Sed interdum vehicula luctus. Nam lorem velit, feugiat at nunc sed, luctus dignissim lacus. Cras risus lorem, ornare nec mauris eu, scelerisque tincidunt mauris. Donec ac accumsan diam, at molestie turpis. Nam nec placerat orci. In sem libero, egestas nec magna id, scelerisque consectetur mauris. Sed finibus faucibus mauris eget vestibulum. Aenean nec odio viverra, euismod sem sed, interdum ante. Donec sit amet mauris et lacus ultrices feugiat suscipit in lectus. Aliquam fermentum euismod tellus, sed volutpat velit luctus id. In quis tortor odio. Cras tincidunt, nisi ut fringilla euismod, tortor arcu placerat sem, et dignissim sem quam eu enim. Duis vitae ante in erat dapibus malesuada.</div>
Поделиться
  • 0
    Thiis работает со всеми DIV на сайте, простите за мой любительский / глупый вопрос, но что, если я хочу получить содержимое DIV только от одного конкретного DIV ID или класса?
  • 0
    Просто измените querySelectorAll('div') на querySelectorAll('.my-class') или querySelectorAll('#my-id')
Показать ещё 3 комментария
0

Что-то вроде этого может помочь:

var desc = "";
document.getElementById("showText").onclick = showText;

function showText() {
  document.getElementById("desc").innerHTML = desc; 
}

function minifyText(len) {
  var textElem = document.getElementById("desc");
  desc = textElem.innerHTML;
  textElem.innerHTML = desc.substring(0, len) +"...";  
}

minifyText(11); // Shorten the text when page loads
<p id="desc">This is some text, for example your description</p>
<button id="showText">Show text</button>
Поделиться
  • 0
    Спасибо, братан, попробовал, но не повезло. Возможно, это как-то связано с тем фактом, что текст внутри тегов <p> </ p> является переменной, которую я должен вызвать <p> <? Php echo $ description; ?> </ P>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню