如何通过引用对象键将字符串附加到 div？答案

【问题标题】：How can I append a string to a div by referencing an object key?如何通过引用对象键将字符串附加到 div？
【发布时间】：2019-04-27 17:40:46
【问题描述】：

最终目标是创建自包含的 Web 文档，允许用户通过单击他们想要更多信息的事物来获取有关事物的更多信息（例如上下文或概念的定义），然后附加适当的将文本添加到 div 的底部——同时禁用点击的链接。

展示我想要的效果比解释它更容易，所以这里有一个 JSFiddle 和我的超级糟糕的解决方案：

https://jsfiddle.net/3qLbycu9/

与此不同，我想将后端简化为两件事：一个完成工作的函数，以及一个充当表格来查找值的对象。基本上：

1) 使用对象来存储文本，如：

var text = {
  key1: "<p>This is some text.</p>",
  key2: "<p>This is some other text.<p>", 
  key3: "<p>This is some more text than that.</p>"
};

2) 将点击时的密钥 ID 传递给某个函数：

<p>Click <a onclick="function(key1)">and this link will give more text.</a></p>

3) 该函数使用 key 获取正确的字符串，将字符串附加到 div，然后禁用链接。

我花了太多时间盯着这个，现在不知道我是接近解决方案，还是离解决方案很远！

【问题讨论】：

标签： javascript html object

【解决方案1】：

首先，您可以将单击a 标签的event 以及您需要的键传递给函数。然后，您可以添加一个类（或您想要的任何其他方式）来禁用单击（尽管我认为这种行为使用起来有点不直观）。

使用给定的键名访问属性，然后创建一个p 元素并附加到div。

const text = {
  key1: "This is some text.",
  key2: "This is some other text.",
  key3: "This is some more text than that."
};

const appendDiv = document.getElementById("append")

function appendText(event, key) {
  event.target.classList.toggle("disabled")
  const newElementContent = text[key];
  if (newElementContent) {
    const newElement = document.createElement("p");
    newElement.textContent = newElementContent;
    appendDiv.append(newElement)
  }
}

.disabled {
  pointer-events: none;
}

<p>Click <a href="#" onclick="appendText(event, 'key1')">and this link will give more text.</a></p>
<p>Click <a href="#" onclick="appendText(event, 'key2')">and this link will give more text.</a></p>
<p>Click <a href="#" onclick="appendText(event, 'key3')">and this link will give more text.</a></p>
<div id="append"></div>

【讨论】：

哇——这就像一个魅力！我晕倒了。（禁用链接的原因是为了避免无休止地附加相同的文本——我不确定有没有比这更好的方法来处理它？）
作为后续工作，为了让嵌套工作，我从 document.createElement("p"); 更改为 document.createElement("div"); 并从 newElement.textContent = newElementContent; 更改为 newElement.innerHTML = newElementContent;
我想不出其他解决方案，也许将其作为工具提示？我不知道。这个想法是给你一个追求的方向。主要的收获是有一个可用的event 以及如何在内联事件处理程序中传递您喜欢的另一个参数。

【解决方案2】：

将密钥传递给字符串应该采用字符串function('key1') 的形式。然后在尝试访问函数中的文本时，请改用 text[key] 下面的例子

var text = {
  key1 = 'hello';
  key2 = 'hi';
}

function showText(key){
     //getting value
     var a = text[key];
}

然后您可以将 showText 传递给 onclick 并显示或使用 a 做您想做的事情

【讨论】：

【解决方案3】：

我不确定其他两个答案是否回答了您的问题。但这是我能想到的最简单的解决方案。 Javascript：

function init() {
  var text = {
    "704e04ea-9f44-4183-af59-8b89067a7245": "<p>This is some text.</p>",
    "3a5306d9-17e7-4414-a192-cf27d885b658": "<p>This is some other text. <a href='#' id='704e04ea-7f44-4183-af59-8b89067a7245'>display nested text</a></p>", 
    "704e04ea-7f44-4183-af59-8b89067a7245": "<p>This is some more text than that.</p>"
  };

  var main = document.getElementById("main");
  var links = main.querySelectorAll("a");
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("click", handleClick);
  }

  function handleClick() {
    var div = document.createElement("DIV");
    div.innerHTML = text[this.id];
    var links = div.querySelectorAll("a");
    for (var i = 0; i < links.length; i++) {
      links[i].addEventListener("click", handleClick);
    }
    document.body.appendChild(div.firstChild);
    this.removeEventListener("click", handleClick);
  }
}

window.onload = init;

HTML：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="main">
      <p>Here's a test <a href="#" id="704e04ea-9f44-4183-af59-8b89067a7245">link</a> over here. And here's <a href="#" id="3a5306d9-17e7-4414-a192-cf27d885b658">another one</a> over here</p>
    </div>
  </body>

</html>

在这里工作：https://plnkr.co/edit/r427l77ZmkdlKozuPSat?p=preview

在此示例中，您只需要维护文本对象和其中使用的锚文本上的 id。您还可以在此示例中的段落中嵌套链接，我认为其他解决方案没有提供。

【讨论】：

好的 - 这是 /lot/ 更接近我最初接近它的方式，并且以 Maaz Syed Adeeb 的解决方案似乎不想要的方式解释嵌套（来自，比如，五分钟我搞砸了）。而且是纯 JS！谢谢！
乐于助人:)