javascript - 尝试实现特定于 Django 模型属性的阅读更多按钮

Question

所以我成功地创建了一个“阅读更多”，显示了音乐艺术家的更多信息，按钮出现在我页面上的每个艺术家的下方。该按钮显示了从 Django 模型中获取的生物带，该模型将生物信息保存在我的数据库中。

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

这是我的 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

我建议你使用 details HTML 标签。它是 JavaScript Free 解决方案，您无需考虑逻辑或会使您的生活变得更艰难的事情。

<details>
    <summary>Summary goes here</summary>

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

有了这个，你将拥有你想要的东西，你可以随心所欲地设计它。如果您需要帮助，请查找 here