用另一个内容替换div的内容

Question

我是一名有用的助手，可以为您翻译文本。

我已经在建立一个链接列表，所有这些链接都应该在单击时将div的内容更改为另一个特定的内容（大约4行内容：名称、网站、联系方式等）。

我找到了这段代码：

<script type="text/javascript">
    function ReplaceContentInContainer(id,content) {
        var container = document.getElementById(id);
        container.innerHTML = content;
    }
</script>

并以这种方式使用它：

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie</a>
</li>

它并没有像我预期的那样工作。

它将超链接文本从“Pomorskie”更改为“superlink”。

纯文本可以正常工作，但我需要链接。

这是http://xn--pytyfundamentowe-jyc.pl/projektanci/kontakty-p/（仅有两个显示任何内容）

但在尝试了所有您的建议之后，我认为我应该跳转到具有＃链接的不同div，因为这没有效果：/

非常感谢您的尝试，并祝幸福快乐:)

- John Alabama

---

你能添加 wojewodztwo 对象的代码吗？ - Patrick Gunderson

你能否展示一个关于你希望链接如何呈现的示例，包括改变之前和之后的效果？ - PhearOfRayne

@PatrickGunderson wojewodztwo只是一个将被替换的div： '<div id="wojewodztwo"></div>' - John Alabama

你的HTML无效，需要改为<a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href=&qout;http://address.com&qout;>superlink</a>')">（注意转义引号） - Bergi

让我们有3个链接： link1（content1） link2（content2） link3（content3） 每个内容都包括nameX，addressX和hyperlinkX这里有一个<div id="wojewodztwo"></div>，点击后应该用contentX替换它 :) - John Alabama

@Bergi """ 没有被转义，它是实体引用。 "" 被转义了，而 "%22" 则是 URL 编码。 - ocodo

Answer 1

作为对此的一种完全侧面看法，我建议避免嵌套的复杂性，并简化问题。

将内容设置为隐藏（即<div id="replacements">...</div>），获取所需节点的innerHTML即可。

这样更容易从非开发人员那里获取替换内容，如果你在一个团队中，这种方法也非常有效。

// Probably better in a separate helpers.js file.
   function replaceContentInContainer(target, source) {
      document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
   }

使用以下方式进行控制：（去掉 href=javascript:，改用 onClick，最好作为事件处理程序的一部分，但为了简洁起见，我将在此处内联它作为 onClick 属性，并使用按钮。）

<button onClick="replaceContentInContainer('target', 'replace_target')">Replace it</button>

我们在文档中有一个目标位置。

<div id="target">My content will be replaced</div>

然后替换内容会隐藏在一个名为replacements的div中。

<div id="replacements" style="display:none">
  <span id="replace_target"><a href="http://address.com">superlink</a></span>
</div>

这是在JSBin中的实现。

通过使用Handlebars或其他一些好的JS模板库来改善其动态性，但这需要OP自己练习。

编辑：注意，您还应该以小写字母开头命名函数，并将大写字母样式保留给类名称，例如：var mySweetInstance = new MySpecialObject();

- ocodo

---

天啊，它运行了 '<script type="text/javascript"> function ReplaceContentInContainer(id,id2) { var container = document.getElementById(id); var container2 = document.getElementById(id2); container.innerHTML = container2.innerHTML;} </script>' - John Alabama

尝试始终使用抽象化/间接性（如果您喜欢，“分而治之”）来解决问题，随着您将事物分离，它们变得越来越简单，并且当您回到它时，一切都感觉更加愉悦。 - ocodo

Answer 2

引号不匹配！因此，当您单击时，会出现JavaScript错误。

浏览器看到的字符串是：

href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie<

作为:

href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="

将双引号内的内容更改为@quot;

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href=@quot;http://address.com@quot;>superlink</a>')">Pomorskie</a>
</li>

示例 fiddle。

同时请注意，使用href标签来执行JavaScript是一种不好的做法。

- epascarello

---

+1 鼓励你考虑到空格等其他因素，超越了给定的 URL。我已经删除了我的回答。尽管在 OP 给出的 URL 中没有使用 " 也可以工作，但正如你正确指出的那样，它并不完全正确。由于你已经解决了这个问题，所以我不需要在另一个答案中重复相同的内容。很好的发现。 - Nope

谢谢大家，虽然没有什么帮助，但我编辑了问题并打算放下它了。干杯！ - John Alabama

Answer 3

你遇到了嵌套引号的问题。查看你的DOM检查器以查看HTML解析器从中构建的内容！（例如在this demo中）

你需要在属性内部HTML转义引号为" 或 ", 或者将其转换为撇号并在JS字符串中使用反斜杠进行转义：

<a href="j[…]r('wojewodztwo', '<a href=&quot;http://address.com&quot;>superlink</a>')">…
<a href="j[…]r('wojewodztwo', '<a href=\'http://address.com\'>superlink</a>')">…

查看工作演示 这里 和 这里。

更好的做法是使用 onclick 属性而不是 javascript 伪 URL：

<a onclick="ReplaceContentInContainer('wojewodztwo', …)">Pomorskie</a>

或者甚至是一个JavaScript注册事件处理程序：

<li class="pl11">
    <a id="superlink">Pomorskie</a>
</li>
<script type="text/javascript">
    function replaceContentInContainer(id,content) {
        var container = document.getElementById(id);
        container.innerHTML = content;
    }
    document.getElementBId("superlink").onclick = function(event) {
        replaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>');
        event.prevenDefault();
    };
</script>

(演示)

- Bergi

---

演示中运行得很好！我马上就要在我的案例中尝试一下 :) 谢谢！ - John Alabama

好的，对我来说不起作用 :/ 感谢你的帮助。我想我会选择使用 #链接 跳转到不同的 div，而不是替换一个。 谢谢和干杯！ - John Alabama

@Slomojo 是的，我正在尝试使用地图上最北边的那个。 - John Alabama

@user1399364 是的，即使它能工作，我也会有点担心使用 \'，我会担心它（可能在另一个（未来？）JS引擎中出现问题，并且非常难以找到/调试）。归根结底，最好使用更多的间接方式来完成这个任务，这样您就可以以更不易破碎的方式组合锚元素。 - ocodo

@Bergi 我知道，我尝试过它，只是有点惊讶。但那种跳跃式的操作应该尽量避免。看看我的回答。 - ocodo