Question

下面的html代码会生成两个链接，当悬停时会输出相应的音频文件。我的问题是，如果我有一个存储在Django数据库中的链接表，如何在javascript中输出它，以便使用Django模板语言我可以循环链接表来填充window.onload函数？还是有更有效的方式？

<head>
<script type="text/javascript">
    window.onload = function() {
        // collecting elements
        var welcomeSound = document.getElementById('welcomeSound');
        var welcomeTxt = document.getElementById('welcomeTxt');

        var sdSound = document.getElementById('shutdownSound');
        var sdTxt = document.getElementById('shutdownTxt');
        //playing welcome sound on mouse over
        welcomeTxt.onmouseover = function() {
            welcomeSound.play();
            return false;
        };

        sdTxt.onmouseover = function() {
            sdSound.play();
            return false;
        };

    };
</script>
</head>
<html>
<section>
    <audio id="welcomeSound" controls="controls" preload="auto">
        <source src="welcome.ogg"></source>
        Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+) browsers.
    </audio>
    <audio id="shutdownSound" controls="controls" preload="auto">
        <source src="shutdown.ogg"></source>
        Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+) browsers.
    </audio>
    <p class="info">
        Use latest Browser Chrome or FireFox.
        <br /> If you usig Internet download manager please close it.
    </p>

    <a id="welcomeTxt" href="#">
    Welcome(Mouse hover here)
 </a>
    <br />
    <br />
    <br />
    <a id="shutdownTxt" href="#">
  Shutdown(Mouse hover here)
 </a>
</section>

</html>

Answer 1

这只是一个基于你所拥有的东西可能对你有用的玩具示例。我之前以这种方式动态创建了JavaScript，并且从来没有遇到任何问题，但是我不能谈论性能或是否有更好的方法。我认为有更好的方法，但这种方式已经并且继续为我工作，所以我想我会分享它。对于此示例，soundlinks必须是音频文件的路径列表。

<head>
    <script type="text/javascript">
     window.onload = function() {
         // collecting elements
         {% for link in soundlinks %}
         var sound{{ forloop.counter }} = document.getElementById('sound{{ forloop.counter }}');
         var text{{ forloop.counter }} document.getElementById('text{{ forloop.counter }}');
         ...

          text{{ forloop.counter }}.onmouseover = function() {
              sound{{ forloop.counter}}.play();
              return false;
          };
         {% endfor %}
     };
    </script>
</head>
<html>
    <section>
        {% for link in soundlinks %}
        <audio id="sound{{ forloop.counter }}" controls="controls" preload="auto">
            <source src="{{ link }}"></source>
        </audio>
        <a id="text{{ forloop.counter }}" href="#">
            Hover to play audiofile #{{ forloop.counter }}
        </a>
        {% endfor %}
    </section>
</html>

如果你可以在.js文件中使用模板标签会很好，但AFAIK你不能这样做（尽管我在这个网站上看到了很多方法）。我用来保持我的JavaScript和HTML在视觉上分离的一个技巧是将JS放在自己的模板中，将{% include %}放在另一个模板中。例如，在audioscript.html：

中

<script type="text/javascript">
 window.onload = function() {
     // collecting elements
     {% for link in soundlinks %}
     var sound{{ forloop.counter }} = document.getElementById('sound{{ forloop.counter }}');
     var text{{ forloop.counter }} document.getElementById('text{{ forloop.counter }}');
     ...

      text{{ forloop.counter }}.onmouseover = function() {
          sound{{ forloop.counter}}.play();
          return false;
      };
     {% endfor %}
 };
</script>

然后在另一个模板中：

<head>
{% include 'audioscript.html' %}
</head>
<html>
    <section>
        {% for link in soundlinks %}
        <audio id="sound{{ forloop.counter }}" controls="controls" preload="auto">
            <source src="{{ link }}"></source>
        </audio>
        <a id="text{{ forloop.counter }}" href="#">
            Hover to play audiofile #{{ forloop.counter }}
        </a>
        {% endfor %}
    </section>
</html>

Django模板语言和javascript

1 个答案: