Javascript 为使用jquery验证插件的多语言django应用程序有条件地加载JS脚本

我有一个Django表单，其中我使用Jquery验证插件进行验证。我的表单需要以多种语言显示，我允许用户单击按钮（每种可能的语言对应一个按钮）即可更改表单语言。每种语言都有一个单独的脚本来加载，以允许内置的验证消息以该语言显示。例如，如果我希望这个插件的默认验证消息是俄语的，我会加载

”https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_ru.min.js“

script

我的问题如下:

我真的应该像下面那样将新脚本添加到标题部分吗？然后，如果用户在语言按钮上来回单击，我的DOM中将有一堆完全不必要的脚本，它们被最后加载的脚本覆盖。这有问题吗？糟糕的风格？有更好的方法吗

如果他们点击“英语”按钮，我不知道该怎么办，因为在这种情况下，我必须去掉所有其他语言脚本，使其默认为英语。有没有一个简单的方法可以做到这一点？我曾想过遍历header的所有子元素，并删除所有最后的子元素，直到我返回到bootstrap（这是我在这些脚本之前的最后一个），但是如果我或其他人选择在那里的末尾添加另一个脚本，这段代码将被弄乱

也许有某种方法可以在标题中为这些脚本保留一个特定的空间，我可以根据用户单击的按钮替换或删除该空间中的内容

是否有某种方法可以在脚本源中使用变量？除了指定语言的两个字母外，它们都是完全相同的，所以我觉得我的代码非常冗余

我也不确定如何将已单击的元素传递给我的ChangeValidationLanguage方法

到目前为止，为了基于按钮单击加载适当的脚本，我所拥有的js代码如下：

window.onload = function() {
document.getElementsByClassName('btn-outline-secondary').setAttribute('onclick', "ChangeValidationLanguage()");
};

function ChangeValidationLanguage(element) {
         var head = document.getElementsByTagName('head')[0];
         var js = document.createElement("script");

         js.type = "text/javascript";
        if (element.id === '#form_ru') {
            js.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_ru.min.js";
        }
        else if (element.id === '#form_fr'){
            js.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_fr.min.js";
        }
        else if (element.id === '#form_es'){
            js.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_es.min.js";
        }
        else if (element.id === '#form_he'){
            js.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_he.min.js";
        }
        // else{ //if (element.id === '#form_en')
        //     js.src = ""
        // }

        head.appendChild(js);


     }

我的html按钮如下所示：

    <div class="language-buttons">       
          <form action="/i18n/setlang/" method="post" id="form_en" style="display:inline!important;">
          <input type="hidden" name="csrfmiddlewaretoken" value="...">
            <input name="next" type="hidden" value="" />
            <input name="language" type="hidden" value="en" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_en" value="Submit">English </button></a>

          <form action="/i18n/setlang/" method="post" id="form_ru" style="display:inline!important;">
          <input type="hidden" name="csrfmiddlewaretoken" value="...">
            <input name="next" type="hidden" value="" />
            <input name="language" type="hidden" value="ru" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_ru" value="Submit">Русский </button></a>

          <form action="/i18n/setlang/" method="post" id="form_fr" style="display:inline!important;">
          <input type="hidden" name="csrfmiddlewaretoken" value="...">
            <input name="next" type="hidden" value="" />
            <input name="language" type="hidden" value="fr" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_fr" value="Submit">français </button></a>

          <form action="/i18n/setlang/" method="post" id="form_es" style="display:inline!important;">
          <input type="hidden" name="csrfmiddlewaretoken" value="...">
            <input name="next" type="hidden" value="" />
            <input name="language" type="hidden" value="es" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_es" value="Submit">español </button></a>

          <form action="/i18n/setlang/" method="post" id="form_he" style="display:inline!important;">
          <input type="hidden" name="csrfmiddlewaretoken" value="...">
            <input name="next" type="hidden" value="" />
            <input name="language" type="hidden" value="he" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_he" value="Submit">עברית </button></a>

    </div>

英语
Русский 
法国
西班牙人
עברית 

---

谢谢大家!

好的。我没有使用Javascript（因为上面Sparky建议不要使用Javascript），而是做了以下工作：

步骤1:在my views.py中，我创建了一个函数，根据给定的语言代码返回正确的语言脚本：

def getLangScript(language_code='en'):
    if language_code == 'ru':
        lang_script = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_ru.min.js"
    elif language_code == 'fr':
        lang_script = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_fr.min.js"
    elif language_code == 'es':
        lang_script = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_es.min.js"
    elif language_code == 'he':
        lang_script = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_he.min.js"
    else:
        lang_script = ""
    return lang_script

第2步：我更改了视图以接受语言代码作为参数，如果未传递任何参数，则默认为英语。我调用上述函数以获取适当的脚本，然后将该脚本传递到上下文中，以便我可以在模板中访问它：

def post_list(request, language_code='en'):
.
.
.
lang_script = getLangScript(language_code)
return render(request, 'template.html', {'form': form, 'lang_script': lang_script})

第3步：我在url.py中更改了路径以接受url参数，该参数将是语言代码（即英语的“en”）：

urlpatterns=[
.
.
.
路径（'test/'，views.post_list，name='post_list'），
]

第4步：在我的模板中，我添加了

，我希望在其中加载脚本，这将导致我的验证以不同的语言显示（我可以从上下文访问它）

第5步：（这里是令人兴奋的部分！）在名为“next”的输入元素中，我通过language.code参数传入了希望重定向到的url。根据将传递给视图的此参数，视图将调用my getLangScript函数，确定要加载的脚本，然后将该脚本作为上下文变量传递给模板。见下文

<div class="language-buttons">
        {% get_current_language as LANGUAGE_CODE %}
        {% get_available_languages as LANGUAGES %}
        {% get_language_info_list for LANGUAGES as languages %}
        {% for language in languages %}
          <form action="{% url 'set_language' %}" method="post" id="form_{{ language.code }}" style="display:inline!important;">
          {% csrf_token %}
            <input name="next" type="hidden" value="{% url 'post_list' language.code%}" />
            <input name="language" type="hidden" value="{{ language.code }}" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_{{ language.code }}" value="Submit">{{ language.name_local}} </button></a>
        {% endfor %}
    </div>

{%get_当前语言为语言代码%}
{%get_可用语言为语言%}
{%get_language_info_list for LANGUAGES as LANGUAGES%}
{%用于语言中的语言%}
{%csrf_令牌%}
{{language.name_local}}
{%endfor%}

这样，当用户单击按钮时，正确的脚本将加载到DOM中，来自jquery语言插件的验证消息将以正确的语言显示

---

如果有人对这是否是一种明智的方法或是否有更好的方法有进一步的评论，我会很感兴趣。

在服务器端框架中工作时，为什么要使用JavaScript交换脚本？只需为所选语言动态编写页面。我认为加载所有不需要的脚本没有任何意义，因为您可以完全控制页面的构造和发送方式。我正在删除jQuery验证标记，因为问题是关于将脚本加载到页面上，而不是关于plugin.Ok的正确使用。你能给我一些提示怎么做吗？我不确定“为所选语言动态编写页面”意味着什么。这就是服务器端框架的全部要点。在这种情况下，我不能说得更具体，因为我不是Django专家。

<div class="language-buttons">
        {% get_current_language as LANGUAGE_CODE %}
        {% get_available_languages as LANGUAGES %}
        {% get_language_info_list for LANGUAGES as languages %}
        {% for language in languages %}
          <form action="{% url 'set_language' %}" method="post" id="form_{{ language.code }}" style="display:inline!important;">
          {% csrf_token %}
            <input name="next" type="hidden" value="{% url 'post_list' language.code%}" />
            <input name="language" type="hidden" value="{{ language.code }}" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_{{ language.code }}" value="Submit">{{ language.name_local}} </button></a>
        {% endfor %}
    </div>