javascript - python django：如何根据传递给模板的参数确定 div 是否应该显示或隐藏

Question

我需要根据从 django views.py 传入的参数设置一个 div 以显示或隐藏，但我无法让它工作。我的代码如下：

在身体里：

{% if report_type == "detail" %}
    visibility("detail");
{% endif %}

在 JavaScript 中：

<script type="text/javascript">
    function visibility(reportType) {
        console.log(reportType);
        if(reportType == "detail") {
            $('#executive_summary').style.display = 'none';
        }
    }
</script>

但是上面的代码不起作用。有人可以给我一些建议吗？谢谢。

Answer 1

通过纯 CSS：

        {% if report_type != "detail" %}
            <div style="display: none;">
        {% else %}
            <div style="display: block;">
        {% endif %}
        ...
        </div>

或者通过使用 JavaScript (jQuery)：

    {% if report_type != "detail" %}
    <script type="text/javascript">
        $('#executive_summary').hide();
    </script>
    {% endif %}

通过 JavaScript 函数：

    <script type="text/javascript">
        /* If wanted to run when page is loaded. */
        $(function() {
            // Handler for .ready() called. 
            visibility("detail");
        });

        function visibility(reportType) {
            if(reportType == "detail") {
                $('#executive_summary').show();
            }
            else {
                $('#executive_summary').hide();
            }
        }
    </script>

Answer 2

问题是您正在使用选择器style返回的 jQuery 对象的不存在属性'#executive_summary'。jQuery 对象没有与 DOM 节点相同的属性和方法。试试这个：

<script type="text/javascript">
    function visibility(reportType) {
        console.log(reportType);
        if(reportType == "detail") {
            $('#executive_summary').hide();
        }
    }
</script>

这将满足您的要求，但如果您绝对必须直接设置 display 属性，您可以将这一行替换为：

$('#executive_summary').css('display', 'none');

但这并不像使用那样干净.hide()

Answer 3

您需要将函数调用放在 javascript 标记中。试试这个：

<script type="text/javascript">
{% if report_type == "detail" %}
    $('#executive_summary').toggle();
{% endif %}
</script>