时间戳

首页 > 解决方案 > 尝试实现特定于 Django 模型属性的阅读更多按钮

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

问题描述

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

可以的话请帮忙，谢谢。

标签： javascripthtmlcssdjangomodel

解决方案

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

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

    <p>Detailed content goes here …&lt;/p>
</details>

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

推荐阅读