如何在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'));