7

我一直在构建一个链接列表，所有这些链接都应该在单击时将 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”更改为“超级链接”。

纯文本工作得很好，但我需要链接。

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

但是在尝试了你所有的建议之后，我想我会用#links跳转到不同的div，因为这个没有任何作用：/

非常感谢您的尝试和欢呼:)

4

3 回答 3

6

就像完全从侧面看这个一样，我建议避免嵌套的怪异/复杂性，并减少问题。

将内容设置为隐藏（即。<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>

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

于 2012-12-20T02:18:28.640 回答
4

引号不匹配！因此，当您单击时，您会收到 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>

示例小提琴。

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

于 2012-12-20T00:52:51.973 回答
0

你有嵌套引号的问题。看看你的 DOM 检查器，看看 HTML 解析器是用它构建的！（例如在这个演示中）

您需要将属性内的引号 HTML 转义为&quot;or &#34;，或者将它们转换为撇号并使用反斜杠在 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-pseudo-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>

（演示）

于 2012-12-20T00:55:47.903 回答