单击另一个元素时恢复以前的值

Question

我有多个元素，每个元素都是一个图块，每个元素中都有文本，当用户单击每个图块时，它会更改文本。我有一个 JavaScript 函数可以处理这个并且它可以工作，但我想这样做，以便一次只有一个图块可以包含更改的文本。单击下一个元素时，前一个元素应 return 为默认文本。下面是我的代码。 P标签中的文字为默认文字。

 <div class="page" title="Page 2" onClick="changeText('Some text blah blah blah.','home-grid-one-one')">
    <p>Understandable</p>
  <div class="page" title="Page 2" onClick="changeText('Some different text blah blah blah.','home-grid-one-two')">
    <p>Measurable</p>

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

Answer 1

好吧，我想建议一个简单的解决方案。 数据属性的使用。

瓷砖：

<p class='tile' data-default="The default text 1 here" data-clicked="Text to be replaced">The default text 1 here</p>

<p class='tile' data-default="The default text 2 here" data-clicked="Text to be replaced">The default text 2 here</p>

<p class='tile' data-default="The default text 3 here" data-clicked="Text to be replaced">The default text 3 here</p>

jQuery:

$('.tile').click(function(e) { // when the tile is clicked
    $('.tile').not(this).text($(this).attr('data-default')); // Except the clicked tile all are restored to default data
    $(this).text($(this).attr('data-clicked')); // The clicked tile gets the replacer text
});

如果您的替换文本中包含 HTML，请使用 .html() 而不是 .text()

单击另一个元素时恢复以前的值

Restore Previous value when another element is clicked

javascript

jquery

onclick