如何在没有文本内容的情况下为文本创建"read more"按钮？

Question

我正在建立一个网站，从NASA的API获取图像。现在，我想为这些图像添加描述，但我不希望显示所有的描述。因此，我想添加一个阅读更多按钮/链接到它。文本内容(或图像描述(每天都会改变。所以我不知道该按哪个字。有没有什么方法可以把按钮放在一定数量的行之后？

非常感谢您的帮助或意见。

Answer 1

您可以将全文内容存储在数据属性中，然后在单击按钮后显示它。

只需根据API返回的描述字符串的长度来判断是否有read more按钮。

<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>

Answer 2

添加2个元素，并使用JavaScript将部分文本放置到您希望按钮所在的行(我稍后会告诉您(，添加可见性："隐藏的"；作为div2的属性之一，在使用Javascript之后，在第一个div之后和第二个div之前添加read more按钮，并添加onclick："document.getElementById("idOfThe2ndDiv"(.visibility="；可见"到按钮。现在我将介绍如何使用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;