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

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

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

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：我尝试实现在其他类似问题中阅读的解决方案。但这不是同一个问题。

最佳答案

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

function show (classname) {
  // targeting your button
  const button = document.getElementById('button')
  // find all possible texts inside of it
  const spans = button.getElementsByTagName('span')
  // hide all of them
  Array.prototype.slice.call(spans).forEach(span => span.classList.remove("visible"))
  // select one to be shown
  const next = button.getElementsByClassName(classname)[0]
  // show it
  next.classList.add('visible')
}

.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>

关于javascript - 如何使用参数模拟单击按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54629972/