如何在 Django 中显示/隐藏列表项？（使用 JS 或 JQuery）答案

【问题标题】：How to show/hide items of the list in Django? (using JS or JQuery)如何在 Django 中显示/隐藏列表项？（使用 JS 或 JQuery）
【发布时间】：2020-04-05 16:24:06
【问题描述】：

我正在使用 Django 框架编写网站，但我是这个网络框架的新手，我不知道如何在 Django 模板中使用 JavaScript。我只是想在点击时显示/隐藏列表的项目，但我只显示/隐藏第一个或最后一个项目。

我的代码：

{% for mysong in album.song_set.all %}

<li onclick=action()><a>CLICK ME</a></li>

<div id="{{mysong.id}}">
    <h1>{{mysong}}</h1>
    <img src="{{album.album_logo}}" width="300px"><br/>
    <h2>Song: {{mysong.song_title}}</h2>

    <h2>Artist: {{album.artist}}</h2>
    <h2>
    <audio controls>
            <source src="{{mysong.audiotrack.url}}" type="audio/mpeg">
    </audio>
    </h2>
</div>
<script>
    function action() {

      var added_item_button = document.getElementById('{{mysong.id}}');
      var actualDisplay = getComputedStyle(added_item_button).display;
      if (actualDisplay == 'none') {
        added_item_button.style.display = 'block';
      } else {
        added_item_button.style.display = 'none';
      }
    }
</script>
{% endfor %}

这就是我尝试显示/隐藏我迭代的列表项目的方式。但似乎，那是行不通的。谢谢，任何帮助将不胜感激。

【问题讨论】：

为什么要为每首歌曲创建相同的 JavaScript 函数？您可以在 javascript 函数中传递 div id 的参数，并根据该参数选择特定的 div。

标签： javascript django django-templates

【解决方案1】：

您的代码的问题在于，您最终会得到一堆略有不同的 JS 函数，它们都声明为 function action() {...}。在 JS 中，您不能为同一个变量分配多个值 - 所以 action 仅指其中一个（我相信最后一个要声明的），并且您设置此代码的方式意味着任何点击只会显示/隐藏那一项。

有许多更好的方法可以避免这个问题并且可以正常工作。一种是只有一个函数，但传递一个参数给它。

这样，您将只有一个 JS 函数（完全在模板循环之外声明），如下所示：

function action(id) {
  var added_item_button = document.getElementById(id);
  var actualDisplay = getComputedStyle(added_item_button).display;
  if (actualDisplay == 'none') {
    added_item_button.style.display = 'block';
  } else {
    added_item_button.style.display = 'none';
  }
}

每个<li>的onclick属性如下：

<li onclick="action({{ mysong.id }})"><a>CLICK ME</a></li>

不过还有其他选择 - 包括在 <li> 上包含一个属性，例如，data-id，它指向它需要显示和隐藏的元素的 ID - 然后您可以从 action 中获取它函数。

我也强烈建议您不要通过onclick 属性在您的HTML 中包含JS，而是在您的JS 中添加此类事件处理程序，例如通过addEventListener 方法。

【讨论】：