以及如何单击同一个按钮以返回所有内容？答案

【问题标题】：And how to click on the same button to return everything back?以及如何单击同一个按钮以返回所有内容？
【发布时间】：2018-03-12 23:17:00
【问题描述】：

单击按钮时，我将显示的值更改为元素，更改颜色和输入的值。

var deleteMarkerButton = document.getElementById('deleteMarkerButton');
var chooseMarkerDelete = document.getElementsByClassName('choose-marker__delete');
var chooseMarkerCheckbox = document.getElementsByClassName('choose-marker__checkbox');
var changeBasketColor = document.getElementsByClassName('cls-2');

    deleteMarkerButton.addEventListener("click", function () {
        for (var i = 0; i < chooseMarkerDelete.length; i++) chooseMarkerDelete[i].style.display = 'block';
        for (var a = 0; a < chooseMarkerCheckbox.length; a++) chooseMarkerCheckbox[a].style.display = 'none';
        for (var b = 0; b < changeBasketColor.length; b++) changeBasketColor[b].style.fill = '#3c8bca';
        document.getElementById("addDeleteBtn").value = "Удалить";
    });

【问题讨论】：

问题是什么？
我认为问题在标题中。 “如何单击同一个按钮以返回所有内容。”
请将您的问题的标题更改为有意义的内容。这是一个答案：stackoverflow.com/questions/1053418/…
@RayKoren 这是一个明显的重复，标记。可能重复：jQuery: Temporarily change a style then reset to original class 很好的发现。

标签： javascript onclick return-value display

【解决方案1】：

如果您总是在相同的两个值之间切换，这很简单：只需检查当前值是什么，然后将其替换为另一个值。伪代码if (foo === a) {foo = b} else {foo = a}

如果您需要在更改某些内容后能够恢复到原始值，并且无法提前知道原始值，那么您需要在更改之前将这些原始值存储在某个地方。

以下是执行此操作的一种方法的简化示例。

这会切换元素的style.display。当前值在修改之前存储在元素的数据属性中；这样下次点击时，该函数可以检查数据属性以查看之前的值是什么：

var foo = document.getElementById("foo");
var bar = document.getElementById("bar");


foo.addEventListener("click", function() {
  // check to see if we've already stashed a value here:
  var pastValue = bar.getAttribute("data-display");

  // stash the current value:
  bar.setAttribute("data-display", bar.style.display);

  // set the current style to the stashed value, if there is one, or "none" otherwise:
  bar.style.display = pastValue || "none";
});

<div id="foo">Click me</div>
<!-- the inline style is used here because `.style.display` can only read inline rules -->
<div id="bar" style="display:block">This will be toggled</div>

【讨论】：