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/（其中只有两个显示任何内容）

但是在尝试了所有的推荐之后，我想我会用#links跳到不同的div，因为这没有任何效果：/

非常感谢您的努力和欢呼：）

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，更好地使用event handler，但为了简洁起见，我会在此处将其作为onClick属性内联，并使用按钮。）

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

我们的目标位于文档的某个位置。

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

然后替换内容隐藏在替换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();

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。

另请注意，使用JavaScript的href标记是一种不好的做法。

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>')">…

参见工作演示here和here。

最好，您应该使用onclick属性而不是javascript - 伪网址：

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

甚至是javascript-registered event handler：

<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>

（demo）

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

3 个答案: