javascript - 替换文本，然后将其替换回来

Question

当用户单击链接时，我使用此代码替换页面上的文本。我想要一种方法，使用替换文本中的另一个链接将其替换回初始文本，而无需重新加载页面。我尝试简单地在替换的文本中添加相同的脚本并切换“place”和“rep_place”，但它不起作用。有任何想法吗？我是编码新手，所以感谢您的任何建议。

<div id="place">
Initial text here
<SCRIPT LANGUAGE="JavaScript">
  function replaceContentInContainer(target,source) {
    document.getElementById(target).innerHTML  = document.getElementById(source).innerHTML;
  }
 </script>
     <div class="text" onClick="replaceContentInContainer('place', 'rep_place')">
      <u><a href="#">Link to replace text</a></u></div></div>
<div id="replacements" style="display:none">
  <span id="rep_place">
 Replacement text here
</div></span>

Answer 1

您将原始文本存储在哪里？考虑一下您在一些更简单的代码中所做的事情...

a = 123;
b = 456;
a = b;
// now how do you get the original value of "a"?

您需要将该值存储在某处:

a = 123;
b = 456;
temp = a;
a = b;
// to reset "a", set it to "temp"

因此，就您而言，您需要将该内容存储在某处。看起来“源”是一个隐藏元素，它可以轻松地保存替换的值。这样，值就会被交换，而不仅仅是复制。像这样的事情:

function replaceContentInContainer(target,source) {
    var temp = document.getElementById(target).innerHTML;
    document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
    document.getElementById(source).innerHTML = temp;
}

因此，只需调用即可替换它们:

replaceContentInContainer('place', 'rep_place')

然后将它们交换回来:

replaceContentInContainer('rep_place', 'place')

请注意，这将替换“source”元素的内容，直到它们再次交换回来。从当前代码我们无法知道这是否会影响页面上的其他任何内容。如果是这样，您可以使用不同的元素来存储原始值。如果您需要存储大量值，情况可能会很快变得复杂。