五种替换文本的方法

在 Web 应用中，这是一个常见的需求：您点击某些内容，然后您刚刚点击的内容的文本就会发生变化。也许是像“显示”按钮切换到“隐藏”，或“展开描述”切换到“折叠描述”这样简单的事情。这是一件相当简单的事情，但需要考虑各种因素。让我们介绍一些方法。

jQuery 方法（更少的标记/更多的 JavaScript）

您需要将“交换”文本存储在某个位置。我认为在大多数情况下，这是一个设计/视图问题，因此将其存储在标记中是一个好主意。我们将使用一个按钮的示例，其文本在“隐藏”和“显示”之间切换。data-* 属性是存储交换文本的绝佳位置。因此，它变成了

<button data-text-swap="Show">Hide</button>

轻松替换文本，例如

var button = $("button");
button.text(button.data("text-swap"));

但是，如果我们这样做，我们将永远丢失原始文本。我们需要先存储原始文本。另一个 data-* 属性就可以做到。

var button = $("button");
button.data("text-original", button.text());
button.text(button.data("text-swap"));

要在点击事件中执行此操作，您需要执行以下操作

var button = $("button");
button.on("click", function() {
  button.data("text-original", button.text());
  button.text(button.data("text-swap"));
});

但这只向一个方向进行。为了完成“交换”，我们需要比较按钮的当前文本值是否与交换文本匹配。如果匹配，则将其更改回原始值。如果不匹配，则更改为交换文本。以下是完成后的样子

$("button").on("click", function() {
  var el = $(this);
  if (el.text() == el.data("text-swap")) {
    el.text(el.data("text-original"));
  } else {
    el.data("text-original", el.text());
    el.text(el.data("text-swap"));
  }
});

jQuery 方法（更多的标记/更少的 JavaScript）

如果我们愿意在原始标记中设置该 data-text-original 值，我们可以简化 JavaScript 代码。我们可以使用单个三元运算符来检查交换是否与原始值匹配，并根据真值执行正确的操作。

$("button").on("click", function() {
  var el = $(this);
  el.text() == el.data("text-swap") 
    ? el.text(el.data("text-original")) 
    : el.text(el.data("text-swap"));
});

原生 JavaScript 方法

我承认在这里使用了过多的 jQuery 来完成无需它就能完成的事情。以下是第一个“更少标记”版本在“原始”JavaScript 中的样子

var button = document.querySelectorAll("button")[0];
button.addEventListener('click', function() {
  if (button.getAttribute("data-text-swap") == button.innerHTML) {
    button.innerHTML = button.getAttribute("data-text-original");
  } else {
    button.setAttribute("data-text-original", button.innerHTML);
    button.innerHTML = button.getAttribute("data-text-swap");
  }
}, false);

CSS 方法（使用 jQuery 更改类名）

由于这是一个视图问题，可以被认为是一种“状态”，因此一个流行的想法是只使用 JavaScript 来更改表示状态的类，并让 CSS 定义视觉更改的实际内容。

我们可以使用类“on”来表示交换状态。然后，该类将应用一个伪元素，覆盖旧单词并将其替换为交换单词。我认为带有默认浏览器样式的实际按钮元素不太适合伪元素，因此让我们在这里使用一个锚点。

a {
  position: relative;
}
a.on:after {
  content: "Hide";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}

公平地说，这有点奇怪。我认为这几乎比将交换单词放在 JavaScript 中更糟糕。CSS 并不是真正为这种事情而设计的，并且可能存在一些无障碍性问题。

这也恰好有效，因为“隐藏”这个词比“显示”稍微小一点。如果交换词更大，则原始词将从白色覆盖层下方伸出来。您也许可以通过内联阻止原始词，隐藏溢出，并使用文本缩进将原始词踢出框外来解决此问题。但替换词是绝对定位的事实将其从流中移除，这可能是一个问题，更不用说现实世界中的设计并不总是像纯色对纯色那样简单。

纯 CSS 方法

但是，嘿，只要我们变得奇怪，我们就可以在这里使用 复选框技巧 来使文本完全通过 CSS 切换。替换方式完全相同，只是当单词前面的一个不可见的复选框处于 :checked 状态或未处于 :checked 状态时发生。这意味着单词也需要在标签中，该标签能够通过 for 属性切换该复选框的状态。

<input id="example-checkbox" type="checkbox">
<label for="example" id="example">Show</label>

#example {
  position: relative;
}
#example-checkbox {
  display: none;
}
#example-checkbox:checked + #example:after {
  content: "Hide";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
}

五种方法的演示

Check out this Pen!

更多？

您过去是如何处理这类事情的？我们没有介绍直接将交换单词放在 JavaScript 中……您对此有何看法？