Question

我有一个语言切换器，我不能直接使用表格。这是代码：

<li class="hoverSelector">
    <i class="fa fa-globe"></i>
    <a>Languages</a>
    <ul class="languages hoverSelectorBlock">
        {% for lang in LANGUAGES %}
        <li><a href="#" lang-code="{{ lang.0 }}" class="change_language" {% if get_current_language == lang.0 %}selected="selected" {% else %} selected="" {% endif %}>{{ lang.1 }}</a></li>
        {% endfor %}
    </ul>
</li>

然后我有这个表格：

<form action="/i18n/setlang/" method="post" style="display: none" id="change_language_form">
{% csrf_token %}
    <select type="hidden">
        <option type="hidden" id="language-option" value=""></option>
    </select>
    <input name="next" type="hidden" value="{{ request.path }}" />
    <input type="hidden" value="" name="language" id="language" />
</form>

然后jQuery形成表单：

<script>
    $('.change_language').click(function(e){
        e.preventDefault();
        $('#language').val($(this).attr('lang-code'));
        $('#language-option').val($(this).attr('lang-code'));
        $('li.active').removeClass('active');
        $('i.fa-check').remove();
        if ($(this).attr('selected') === 'selected')
        {
            $(this).append('<i class="fa fa-check"></i>');    
        }
        $(this).parent('li').addClass('active');
        $('#change_language_form').submit();
    });    
</script>

代码可以工作，并且会更改语言，但是一旦页面重新加载，我似乎无法在当前语言旁边显示复选标记。我尝试添加

if ($('.change_language').attr('selected') === 'selected')
{
    $(this).append('<i class="fa fa-check"></i>');
}

在我之前展示的jQuery的底部，但仍然没有在重新加载后显示正确语言旁边的复选标记，并且它使得其他JavaScript似乎根本不起作用。没有复选标记。

如果没有该代码，当我单击该语言时它会显示正确的复选标记，然后如果我单击另一个，则会移动复选标记。但正如我在页面重新加载后所说，复选标记消失了。

如何使其标记当前语言？我错过了什么？

谢谢，非常感谢任何帮助

Answer 1

我能够通过在jQuery下添加它来修复它：

$('.current_language').parent().addClass('active');
$('.current_language').append('<i class="fa fa-check"></i>');

添加此模板标记：

{% get_current_language as current_lang %}

然后再到语言下拉列表中<li>内的锚点类。

class="change_language{% if current_lang == lang.0 %} current_language {% endif %}"

Django语言切换器未显示当前语言旁边的检查

1 个答案: