如何在單擊另一個元素時將onclick函數轉換為默認文本

Question

我使用的是onClick方法來更改元素的文本，我具有3x3的網格布局，下面是此網格中一個正方形的示例。 當前，如果我單擊每個正方形，它們都將更改其文本，但是當單擊另一個元素時，我想返回位於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>;

將它們全部恢復為默認文本，然后將單擊的文本更改為所需的文本。 如果它們所有的默認文本都不同，則您可能需要做一些稍微復雜的事情，但是該方法的原理是相同的。