Question

加载第一页时，我希望用户浏览所有音乐，但是如果他从RadioButton中选择一个列表，则我只希望该列表中的音乐，但javascript函数不起作用。

让我补充一点，我通常不懂JavaScript，但是我需要使用它。

<div style = "margin-top : 100px;"class = "container">
        {% for table in tables %}
        <input type="radio" name="list1" onclick="mL('{{table}}')"> {{table}}
        {% endfor %}
        <div align="center">
            <audio class="my_audio" controls="controls" autoplay="autoplay" style="width:500px;"></audio>
            <ul>
            {% for table in tables  %}
                {% for music in musics %}
                    <li style="list-style-type:None">
                        <a id="{{table}}" href="javascript:void(0);" onclick="playSong('{{music}}')">{{music}}</a>
                    </li> 
                {% endfor %}
            {% endfor %}
                {% for music in musics %}
                    <li style="list-style-type:None">
                        <a id="default" href="javascript:void(0);" onclick="playSong('{{music}}')">{{music}}</a>
                    </li> 
                {% endfor %}

            </ul>
        </div>
    </div>

<script> function mL(x)
    {
        {% for table in tables  %}
            if (x=={{table}})
            document.getElementById("{{table}}").style.display="block";
            document.getElementById("default").style.display="none";
        {% endfor %}
            else
            document.getElementById("{{table}}").style.display="none";
            document.getElementById("default").style.display="block";
            return;
    }
    </script>

Answer 1

这不是Django的问题，它纯粹是关于JavaScript（或应该是JavaScript）的问题。

您的代码有一些问题：

在HTML中，id属性在文档中应该是唯一的。您似乎有许多具有相同ID的<a>标签。使用class属性，甚至最好使用您自己的数据属性，例如data-table。
您可以像您一样使用Django模板标签生成JavaScript，但是我认为这是一个坏主意，因为很难推断出代码的工作方式。请勿在{{1}}块内使用{% for %}。
JavaScript不像Python那样对代码块使用空格。您需要使用括号<script>。

这些问题解决后，请使用浏览器中的调试控制台（Firefox和Chrome中为F12）。它可以让您看到任何语法错误，甚至可以在控制台中运行代码以查看类似{ }的工作方式。

JavaScript函数在Django上不起作用

1 个答案: