尝试实现一个特定于Django模型属性的read-more按钮

Question

所以我成功地创建了一个"阅读更多"，它显示了音乐艺术家的更多信息，并且按钮显示在我页面上每个艺术家的下面。该按钮显示了从Django模型中获取的bands bio，该模型在我的数据库中保存了bio信息。

该按钮适用于页面上的第一个艺术家，但当我单击页面上其他艺术家下方的按钮时，它仍然只显示第一个乐队(页面顶部的乐队(的个人简介。如何使按钮显示每个特定波段的信息？

这是我的HTML代码

<p><span id="dots">...</span><span id="more">{{ artist.bio }}</span></p>
<button onclick="myFunction()" id="readmore">Show more on this artist</button>

这是我的CSS代码

p {
font-size: 18px;
margin-left: 40px;
margin-right: 40px;
}
#readmore {
font-size: 18px;
color: darkgrey;
margin-left: 40px;
margin-right: 40px;
}
#more {
display: none;
}

这是我的Javascript

function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("readmore");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Show more on this artist"; 
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Hide information on this artist"; 
moreText.style.display = "inline";
}
}

如果可以的话，请帮忙，谢谢。

Answer 1

我建议您使用detailsHTML标记。这是一个无JavaScript的解决方案，您不需要考虑逻辑或其他会让您的生活更加艰难的事情。

<details>
<summary>Summary goes here</summary>
<p>Detailed content goes here …</p>
</details>

有了这个，你就会拥有你想要的东西，你可以随心所欲地设计它。如果你需要帮助在这里查找