如何在 django 模板中获取带有 javascript 变量的数组元素？

Question

我正在创建一个滑块，所以我想在 Django 中获取模板数组的元素。 我的 HTML 文件是：

<div id="sideBar_mostVisited_control">
    <a href="">
        <p>
            {{ mostVisited_names.0 }}
        </p>
    </a>
    <div>
        <p>
            1
        </p>
    </div>
    <button type="button" id="mostVisited_arrowRight">
        <img src="{% static 'icons/base/arrowRight.png' %}" id="mostVisited_arrowRight">
    </button>
    <button type="button" id="mostVisited_arrowLeft">
        <img src="{% static 'icons/base/arrowLeft.png' %}" id="mostVisited_arrowLeft">
    </button>
</div>
<div id="sideBar_mostVisited_images">
    <div>
        {% for image in mostVisited_images %}
            <img src="{{ image }}">
        {% endfor %}
    </div>
</div>

我想在图像更改时更改名称。我的 jQuery 文件是：

var index=$('#sideBar_mostVisited_control div p').html();
$('#sideBar_mostVisited_control div p').html(index+1);
$('#sideBar_mostVisited_control a p').html("{{ mostVisited_names.index }}");

但在{{ mostVisited_names.index }} 中无法识别索引。 我该怎么办？

Answer 1

问题：

由于 JS 文件是静态的，所以不能将 Django 变量放入其中。

解决方案：

解决这种情况的一种方法是在 html 中“存储”js 所需的 Django 变量。之后你可以抓取它并在你的 js 脚本中使用它！

一些代码：

<script type="text/javascript">
  // "store" variables from Django in the body
  $('body').data('name_index', {{mostVisited_names.index}});
</script>

然后在你的 JS 中，从 datamap 中获取值：

var index=$('#sideBar_mostVisited_control div p').html();
$('#sideBar_mostVisited_control div p').html(index+1);
$('#sideBar_mostVisited_control a p').html($('body').data('name_index'));