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

【问题标题】：Trying to implement a read more button that is specific to Django model attribute尝试实现特定于 Django 模型属性的阅读更多按钮
【发布时间】：2020-07-16 19:24:00
【问题描述】：

因此，我成功地创建了一个“阅读更多”，它显示了有关音乐艺术家的更多信息，并且该按钮出现在我页面上每个艺术家的下方。该按钮显示从 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";
          }
        }

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

【问题讨论】：

标签： javascript html css django model

【解决方案1】：

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

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

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

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

【讨论】：

这是一个有用的替代品。非常感谢
没问题。随时。如果它对您有帮助，请接受答案，以便其他人在遇到相同问题时可以更轻松地找到它。