Question

我正在使用引导程序下拉菜单，当用户重新加载页面时，我需要设置默认选项（Highest positive votes）。

我尝试了$('#dropdownMenuButton span.option').text("Highest positive votes");，但是它不能解决我的问题，因为我无法将文本保留在js文件中，由于django框架的翻译，我需要将文本保留在html文件中{% trans 'Highest positive votes' %}

HTML代码

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">        
    <span>{% trans 'Sorted by' %}: </span><span class="option">{% trans 'Highest positive votes' %}</span>
</button>

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item itemSort" href="#" name='thumbsUp'>{% trans 'Highest positive votes' %}</a>
    <a class="dropdown-item itemSort" href="#" name='thumbsDown'>{% trans 'Highest negative votes' %}</a>
    <a class="dropdown-item itemSort" href="#" name='creationOrder'>{% trans 'Latest' %}</a>
</div>

jQuery

$('a.itemSort').click(function() {
    if (this.name == 'thumbsUp') {
        ...
    } else if (this.name == 'thumbsDown') {
        ...
    } else if (this.name == 'creationOrder') {
        ...
    }
    $('#dropdownMenuButton span.option').text($(this).text());
});

我希望当我重新装饰页面时，下拉菜单会显示文本Highest positive votes。

我正在尝试模拟对thumbsUp上的dropdownMenuButton选项的点击。

我该怎么做？有更好的解决方法吗？

ps .：我尝试实施在其他类似问题中阅读的解决方案。但这不是同一个问题。

Answer 1

要单击特定锚，可以使用属性选择器来定位它，就像这样。

$('a.itemSort[name="thumbsUp]"').click()

Answer 2

您可以在按钮内创建一些跨度，然后隐藏/显示所需的跨度。只需一点CSS和JS

.thumbsUp,
.thumbsDown {
  display: none;
}

.visible {
  display: block;
}

<button id="button">
  <span class="thumbsUp visible">Thumbs UP</span>
  <span class="thumbsDown">Thumbs Down</span>
</button>
<div>
  <button onclick="show('thumbsUp')">Show thumbs up</button>
  <button onclick="show('thumbsDown')">Show thumbs down</button>
</div>

public static void main(String[] args) {
    String input = "stack, overflow.";
    String[] splited = splitInput(input);
    String result = "";
    for(String s : splited){
        result += reverseString(s);
    }
    System.out.println(result);
}

public static String[] splitInput(String input) {
    // [,\\. ] -> split at , . ' ' and keep the delimiters
    // this will produce for the example input [stack, ,,  , overflow, .]
    String regex = "((?<=[,\\. ])|(?=[,\\. ]))";
    return input.split(regex);
}
public static String reverseString(String str) {
    return new StringBuilder(str).reverse().toString();
}

Answer 3

django模板变量仅在页面首次加载时在运行时运行，并且当您单击菜单时它不会采用django'trans'格式程序翻译的文本。

因此您可以通过将下拉菜单项文本保存在javascript对象变量中并像这样使用来解决您的问题：

var translatedTextsObj = {
    'thumbsUp': {% trans "Highest positive votes" %},
    'thumbsDown': {% trans "Highest negative votes" %},
    'creationOrder': {% trans "Latest" %}
}

$('a.itemSort').click(function () {

   if(this.name == 'thumbsUp'){
       ...
   }

   else if(this.name == 'thumbsDown'){
       ...
   }

   else if(this.name=='creationOrder'){
       ...
   }

   $('#dropdownMenuButton span.option').text(translatedTextsObj[this.name]); // here is the translated text
});

Answer 4

尝试

$('#dropdownMenuButton').html("<span>{% trans 'Sorted by' %}: </span><span class="option">{% trans 'Highest positive votes' %}</span>");

如何使用参数模拟单击按钮

4 个答案: