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

Question

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

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 = "Удалить";
    });

Answer 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>

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

And how to click on the same button to return everything back?

javascript

onclick

return-value

display