单击另一个元素时如何将 onclick 函数打开为默认文本

Question

我正在使用 onClick 方法来更改元素的文本，我有一个 3x3 网格布局，下面是该网格中一个正方形的示例。目前，如果我单击每个方块，它们都会更改其文本，但我想 return 到单击另一个元素时位于 p 标记中的默认文本。

onClick="changeText('Some text blah blah blah.','home-grid-one-two')" 
<p style="text-align: center;">Measurable</p>

目前这是 onClick 调用的 JavaScript 函数

function changeText(text, ele)


     { 
            var display = document.getElementById(ele);
            display.innerHTML = "";
            display.style.textAlign = "center";
            display.style.fontSize = "1em";
            display.innerHTML = text;
        }

Answer 1

您可以存储以前的值，然后在单击另一个元素时恢复它们。

var previousElement = null;
var previousText = "";

function changeText(text, ele) { 
  //restore previous values
  if(previousElement) {
    previousElement.innerHTML = previousText;
  }

  //store the values
  previousElement = document.getElementById(ele);
  previousText = previousElement.innerHTML;

  previousElement.innerHTML = ""; //this isn't required
  previousElement.style.textAlign = "center";
  previousElement.style.fontSize = "1em";
  previousElement.innerHTML = text;
}

编辑：在更新的问题中，您询问了使用 p 标签中的值。你可以这样做。

我会给 p 标签一个 id，比如“#previousText”。然后将 changeText() 方法更新为：

var previousElement = null;

function changeText(text, ele) { 
  var previousText = document.getElementById("previousText");

  //restore previous values
  if(previousElement) {
    previousElement.innerHTML = previousText.innerHTML;
  }

  //store the values
  previousElement = document.getElementById(ele);
  previousText.innerHTML = previousElement.innerHTML;

  previousElement.innerHTML = ""; //this isn't required
  previousElement.style.textAlign = "center";
  previousElement.style.fontSize = "1em";
  previousElement.innerHTML = text;
}

Answer 2

如果您将其设计为您想要控制的所有 div 的 ID 都有一个模式（假设它们都以 "home-grid" 开头），那么您可以执行类似

$("[id=^home-grid]").innerHTML=<whatever your default text is>;

到return全部为默认文字，然后把你点击的那个改成你想要的文字。如果它们都有不同的默认文本，您可能需要做一些稍微复杂的事情，但该方法的理论是相同的。

单击另一个元素时如何将 onclick 函数打开为默认文本

How to turn onclick function to default text when another element is clicked

javascript

jquery

onclick