Question

我想在普通JavaScript中创建两个不同的按钮，一个接一个地单击时，显示不同的文本消息。

对重组以下代码有何建议？谢谢。

我可以找到一个按钮的切换功能，但不能找到不同按钮的切换功能。

index.html

<button onclick="revealMessageUk()"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>

<button onclick="revealMessageSpain()"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>


<p id="hiddenMessageUk" style="display:none">Hello!</p>

<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>

index.js

function revealMessageUk() {
  document.getElementById('hiddenMessageUk').style.display = 'block';
}

function revealMessageSpain() {
  document.getElementById('hiddenMessageSpain').style.display = 'block';
}

我不仅要像下面显示的那样，还要为以下两种外语提供一种切换功能（隐藏/显示或添加/删除功能）。

Answer 1

尝试

function revealMessage(msg) {
  hiddenMessage.style.display='block';
  hiddenMessage.innerText=msg;
}

<button onclick="revealMessage('Hello!')"><li><img class="flag-pictures" src="images/uk.svg" id="1" alt='UK'/></li></button>

<button onclick="revealMessage('¡Hola!')"><li><img class="flag-pictures" src="images/spain.svg" id="3" alt='ES'/></li></button>

<p id="hiddenMessage" style="display:none"></p>

Answer 2

这是一种切换方式，但是当添加更多语言环境时，也可以保持灵活。您保留一种selectedLocaleId“状态”，并在单击具有相应区域设置ID的按钮之一时进行更改。

let selectedLocaleId;

function selectLocale(newSelectedLocaleId) {
  // If there is a selected locale id,  un-select it
  if (selectedLocaleId) {
    document.getElementById(selectedLocaleId).style.display = 'none';
  }
  // set the new selected locale id
  selectedLocaleId = newSelectedLocaleId;
  document.getElementById(selectedLocaleId).style.display = 'block';
}

<button onclick="selectLocale('hiddenMessageUk')"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>

<button onclick="selectLocale('hiddenMessageSpain')"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>


<p id="hiddenMessageUk" style="display:none">Hello!</p>

<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>

希望这会有所帮助：）

欢呼

不同按钮的切换功能

2 个答案: