如何在沒有文本內容的情況下為文本創建“閱讀更多”按鈕？

我正在建立一個從 NASA 的 API 獲取影像的網站。現在，我想為這些影像添加描述，但我不希望顯示所有描述。因此，我想添加一個閱讀更多按鈕/鏈接。文本內容（或影像的描述）每天都會改變。所以我不知道該把按鈕放在哪個詞上。有什么方法可以在一定數量的行之后放置按鈕？

非常感謝任何幫助或輸入，謝謝。

uj5u.com熱心網友回復：

您可以將全文內容存盤在資料屬性中，然后在單擊按鈕后顯示它。

只需根據 API 回傳的描述字串的長度確定是否有閱讀更多按鈕。

<div id="main"></div>

<script>
    const main = document.querySelector('#main');

    const posts = [
        {
            image: 'https://www.mobiltech.cz/wp-content/uploads/2021/04/placeholder-2.png',
            description:
                'Long description lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, augue ac feugiat venenatis, eros tortor fringilla leo, quis posuere dui lectus in velit. Suspendisse consectetur orci quis elit congue mollis. Cras eget lorem faucibus, dictum nisi eget, elementum velit. Integer imperdiet hendrerit velit, id porttitor nunc vestibulum vel. Integer ut congue lectus, id ullamcorper neque. Curabitur non pharetra urna, ac euismod magna. Proin sit amet mollis leo. Vestibulum in nunc sed mi feugiat pellentesque. Donec vel molestie lacus. Nam dictum imperdiet tortor pellentesque posuere. Nullam arcu nisl, rhoncus hendrerit condimentum et, bibendum porta sapien.',
        },
        {
            image: 'https://www.mobiltech.cz/wp-content/uploads/2021/04/placeholder-2.png',
            description: 'Short description.',
        },
        {
            image: 'https://www.mobiltech.cz/wp-content/uploads/2021/04/placeholder-2.png',
            description:
                'Medium description length. lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, augue ac feugiat venenatis,',
        },
    ];

    const createPost = ({ image, description }) => {
        const div = document.createElement('div');

        const img = document.createElement('img');
        img.setAttribute('src', image);
        img.style.maxWidth = 200   'px';

        const text = document.createElement('p');

        div.appendChild(img);

        if (description.length > 50) {
            text.innerText = `${description.slice(0, 50)}...`;
            text.setAttribute('data-full', description);

            const btn = document.createElement('button');
            btn.innerText = 'Read more...';
            btn.setAttribute('onclick', 'displayPost(this)');

            div.appendChild(text);
            div.appendChild(btn);
            return div;
        }

        text.innerText = description;
        div.appendChild(text);
        return div;
    };

    posts.forEach((post) => {
        const element = createPost(post);
        main.appendChild(element);
    });

    const displayPost = (elem) => {
        elem.previousSibling.innerText = elem.previousSibling.getAttribute('data-full');
        elem.remove();
    };
</script>

uj5u.com熱心網友回復：

添加 2 個元素并將部分文本放置到您希望按鈕所在的行使用 JavaScript（稍后我會告訴您），在使用 Javascript 后添加可見性：“隱藏”作為 div2 的屬性之一, 在第一個 div 之后和第二個 div 之前添加閱讀更多按鈕，添加一個 onclick:"document.getElementById("idOfThe2ndDiv).visibility = "visible"; " 到按鈕。現在我將介紹如何使用 JavaScript。

var text = "lorem ipsum dolor sit amet" //make the text the description of the image
var part1 = text.slice(0, num); //replace num with the amount of characters you want
var part2 = text.slice(num);
document.getElementById("idOfThe1stDiv").InnerHTML = part1;
document.getElementById("idOfThe2ndDiv").innerHTML = part2;

標籤：javascript html css dom

上一篇：innerhtml不列印完整的陣列

下一篇：在javascript中使用classList迭代元素和切換