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”元素的内容，直到它们再次被换回。从当前代码中我们无法知道这是否会影响页面上的任何其他内容。如果是这样，您可以使用其他元素来存储原始值。如果您需要存储大量值，那么这可能会很快变得复杂。

Answer 2

工作示例： http://jsbin.com/huxodire/1/

我做的主要改变如下：

我使用textContent代替innerHTML，因为后者替换了整个DOM内容，包括删除链接以替换文本。之后无法生成该事件。

我关闭了第一个div，否则将使用innerText删除所有文本，包括用作链接的文字。

你说你想要替换回原始文本，所以我只使用一个变量来保存最后一个值。

希望这有帮助，如果您需要更多帮助，请与我们联系。

Answer 3

div标签混淆了并在运行后擦除了你的链接。我刚刚使用了您的代码并展示了如何切换。

<div id="place">
Initial text here
</div>
<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 class="text" onClick="replaceContentInContainer('place', 'original_place')">
  <u><a href="#">Link to restore text</a></u></div>

<div id="replacements" style="display:none">
  <span id="rep_place">
Replacement text here
</span>
<span id="original_place">
Initial text here
</span>
</div>

Answer 4

这是怎么回事？我将初始内容存储在名为initialContent的数组元素中。

<div id="place">
Initial text here [<a href="#" onClick="replaceContentInContainer('place', 'rep_place')">replace</a>]
</div>

<div id="replacements" style="display:none">
    <span id="rep_place">
    Replacement text here [<a href="#" onclick="showInitialContent('place')">revert</a>]
    </span>
</div>

<SCRIPT LANGUAGE="JavaScript">
var initialContent = [];

function replaceContentInContainer(target,source) {
    initialContent[target] = document.getElementById(target).innerHTML;
    document.getElementById(target).innerHTML  = document.getElementById(source).innerHTML;
}

function showInitialContent(target) {
    document.getElementById(target).innerHTML = initialContent[target];
}
</SCRIPT>

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

4 个答案: