Question

我只想显示300个字符长的段落，下面是代码im用于隐藏/显示全文，我应该怎么做才能使其仅显示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);
        }
});
});
}

Answer 1

类似的事情可能会有所帮助：

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>

Answer 2

我要做的是在每个字母上分开，然后将前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>

x个字符后阅读更多内容JavaScript

2 个答案: