javascript

Question

我正在使用按钮打开菜单，但我喜欢这个按钮显示菜单符号而不是 'Menu' 文本。

如下：

&#9776; -> ☰

&#10006; -> ✖

function toggleText(button_id) {
  var el = document.getElementById(button_id);
  if (el.firstChild.data == "&#10006;") {
    el.firstChild.data = '&#9776;';
  } else {
    el.firstChild.data = "&#10006;";
  }
}

<button id="playlist-toggle" class="btn-playlist" onclick="toggleText(this.id);">&#9776;</button>

Answer 1

尝试使用 innerHTML 并使用 this:

直接传递按钮元素

function toggleText(button) {
  if (button.innerHTML == "&#10006;" || button.innerHTML == "✖") {
    button.innerHTML = '&#9776;';
  } else {
    button.innerHTML = '&#10006;';
  }
}

<button id="playlist-toggle" class="btn-playlist" onclick="toggleText(this);">&#9776;</button>

注意： innerHTML 可以是 ✖ 或 ✖，因此请检查两者。

Answer 2

只需更改按钮的实际文本而不是子项。另请注意，innerHTML 可以是实体或呈现的实体，因此也要检查一下：

function toggleText(button_id) {
  var el = document.getElementById(button_id);
  if (["&#10006;", "✖"].includes(el.innerHTML)) {
    el.innerHTML = '&#9776;';
  } else {
    el.innerHTML = "&#10006;";
  }
}

<button id="playlist-toggle" class="btn-playlist" onclick="toggleText(this.id);">&#9776;</button>

javascript - 在按钮中显示符号而不是文本

javascript - Show symbol rather text in button

html

css

menu