Question

这是一个迭代记录的Django模板。每个记录都包含一个JS函数填充的div。为了让JS知道该怎么做，它需要从每个for循环迭代中获取一个变量并使用它。我不确切知道如何实现这一目标或者是否可能。可能需要一种不同的方法，其中记录在单独的JS对象实例中触发计时器，我不知道。

---------- html -----------------------

{% for match in upcoming_matches %}
...

<tr>
<td> Match title </td>
<td> Match time </td>
<td> Starts in: </td>
<tr>

<tr>
<td> {{ match.title }} </td>
<td> {{ match.start_time }} </td>
<td> <div id="matchCountdown"/></td>
<tr>

...

{% endfor %}

------------ JS ---------------------------

$(function () {

        var start_date = {{ match.start_date }}; // Obviously I can't access vars from for loop, I could access upcoming_matches but not the ones from for loop


        var matchDate = new Date(start_date.getTime() 

     $('#matchCountdown').countdown({until: matchDate});

    });

Answer 1

您还可以在代码的javascript部分使用{％for％}循环。如果你在你的html模板中写这个：

<script type="text/javascript">
    $(function() {
        {% for match in upcoming_matches %}
            var match_date_{{ match.id }} = new Date({{ match.start_date }}).getTime();
            $('#matchCountdown_{{ match.id }}').countdown({until: match_date_{{ match.id }});
        {% endfor %}
    });
</script>

此外，<div id="matchCountdown"/>在这种情况下变为<div id="matchCountdown_{{ match.id }}"/>。

Answer 2

您可以输出start_date作为matchCountdown的属性。然后在你的JavaScript中选择它，处理它并使用Countdown插件输出。

模板代码：<td><div class="matchCountdown" start="{{ match.start_date }}" /></td>

JavaScript的：

$('.matchCountdown').each(function() {
    this = $(this);
    var start_date = this.attr('start');
    var matchDate = new Date(start_date).getTime();
    this.countdown({until: matchDate});
});

此方法只需要模板代码中的一个循环和Javscript中的一个循环来查找和启用项目。另外值得注意的是，'matchCountdown'应该是 class 而不是div的 id ，因为它不是唯一的。

Answer 3

查看jQuery的.data()

使用它可以将数据存储在DOM中，就像这样

<div id="myDiv" data-somedata="myimportantdata"></div>

然后您可以使用jQuery（例如

）访问它

$("#myDiv").data("somedata");

来自{％for％}的Django模板变量循环到Javascript

3 个答案: