Question

今天我一直在寻找在点击时切换按钮文本的最佳方法，例如从“阅读更多”到“少阅读”。

我在CSS Tricks https://css-tricks.com/swapping-out-text-five-different-ways/上发现了关于交换文本的文章，在解构了每个方法后，我有一个关于JavaScript数据属性行为的简单问题。

考虑以下代码：

$("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"));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="example-two" data-text-swap="Show">Hide</button>

我的问题与“text-original”的使用有关，“text-original”是HTML标记中不存在的数据属性。这段代码怎么没有抛出错误？我认为它的工作原理是因为JavaScript必须以某种方式恢复为默认的html，即“隐藏”。有人可以解释为什么这有效吗？

Answer 1

这是因为data-text-swap和data-text-original是不同的东西，data-text-swap是HTML5 data- *属性，而data-text-original正在存储与该元素相关的一些数据。

基本上它会将data-text-swap值与元素的实际文本值进行比较，最初它们会有所不同，当您单击文本时，值将更改为data-text-swap，另一个保存在data-text-original上.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a { color: #xxxxxx; }，等等......

您可以在此处查看更多相关信息：https://api.jquery.com/data/#data1 vs https://api.jquery.com/data/#data2

Answer 2

通常，JS在直接访问不存在的属性/属性时不会出错。

具体来说，您正在使用jQuery的全局数据缓存，它集成了HTML5 data-属性，并且在数据尚不存在时也不会抱怨。

无论哪种方式，这种技术都是不必要的，因为您不需要单独的存储来执行此操作，现代浏览器使得通过dataset属性获取数据属性变得特别容易。

此演示使用dataset和解构分配来使此代码非常简短和干净。

$("button").on("click", function() {
  [this.dataset.textSwap, this.textContent] = [this.textContent, this.dataset.textSwap];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="example-two" data-text-swap="Show">Hide</button>

当然，你可以在没有jQuery依赖的情况下做到这一点。

document.querySelector("button").addEventListener("click", function() {
  [this.dataset.textSwap, this.textContent] = [this.textContent, this.dataset.textSwap];
});

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

引用不存在的HTML数据属性时的JavaScript行为？

2 个答案: