为什么更改计算器 "button grid" 中突出显示的按钮会导致之前突出显示的按钮文本消失？

Question

我正在构建一个小费计算器，它有一个按钮网格用于可能的百分比。选择任何提示按钮时，我希望更改字体和背景颜色。这是我的问题，如果我选择了提示按钮，然后将焦点更改为不同的提示按钮，之前聚焦的提示按钮上的文本会消失吗？然后，如果您将鼠标悬停在它上面，它会重新出现。

我在 CSS 中有一个 class 用于任何未选中按钮的字体颜色。在单击事件中，我尝试遍历网格中的每个按钮并使用 DOM 手动添加该字体，但我仍然遇到这个“消失的文本”问题。我需要对 'blur' 事件做些什么吗？我卡住了！这是此按钮网格的代码：

tipTiles.forEach((el) => {
  el.addEventListener("click", (e) => {
    tipTiles.forEach((tile) => {
      if (tile.classList.contains("btn-bg2")) {
        tile.classList.remove("btn-bg2");
        tile.classList.remove("btn-font2");
        tile.classList.add("btn-font1");
      }

      e.currentTarget.classList.add("btn-bg2");
      e.currentTarget.classList.add("btn-font2");
    });
  });
});

Link 到下面的项目：

https://tips-calculation.netlify.app/#

Answer 1

试试这个它一定能解决你的问题:)

从 Html 中的元素中删除 btn-bg1 btn-font1 类，如下所示：

<li class="tip-tile" tabindex="0">

在style.css中找到.tip-tile:last-child并添加颜色：unset；之后它应该是这样的：

.tip-tile:last-child {
  color: unset;
  text-align: center;
  padding: 0.5rem;
  border-radius: 5px;
  font-size: 1.2rem;
  background-color: #f4fafa;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}

用这个更新你的 js 代码：

tipTiles.forEach((el) => {
  tipTiles.forEach((tile) => {
    tile.classList.remove("tip-tile");
    tile.classList.add('btn-bg1', 'btn-font1', 'tip-tile');
  });
  el.addEventListener("click", (e) => {
    tipTiles.forEach((tile) => {
      if (tile.classList.contains('btn-bg2')) {
        tile.classList.remove("tip-tile");
        tile.classList.replace("btn-bg2", "btn-bg1");
        tile.classList.replace("btn-font2", "btn-font1");
        tile.classList.add("tip-tile");
      }
      e.currentTarget.classList.replace("btn-bg1", "btn-bg2");
      e.currentTarget.classList.replace("btn-font1", "btn-font2");
    });
  });
});

resetBtn.addEventListener("click", function () {
  if (totalAmount.textContent !== 0) {
    totalAmount.textContent = "[=13=].00";
    tipAmount.textContent = "[=13=].00";
    billField.value = 0;
    peopleField.value = 0;
    resetBtn.classList.remove("btn-bg2");

    tipTiles.forEach((tile) => {
      if (tile.classList.contains("btn-bg2")) {
        tile.classList.remove("tip-tile");
        tile.classList.replace("btn-bg2", "btn-bg1");
        tile.classList.replace("btn-font2", "btn-font1");
        tile.classList.add("tip-tile");
      }
    });
  }
});

为什么更改计算器 "button grid" 中突出显示的按钮会导致之前突出显示的按钮文本消失？

Why does changing the highlighted button in my "button grid" for my calculator cause the previously highlighted button text to disappear?

html

javascript

css

css-grid