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

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

javascript html object

Javascript 如何通过引用对象键将字符串附加到div？,javascript,html,object,Javascript,Html,Object,最终目标是创建自包含的web文档，允许用户通过单击他们需要更多信息的对象来获取更多信息（如上下文或概念的定义），然后在div底部添加适当的文本，同时禁用单击的链接显示我想要的效果比解释它更容易，所以这里有一个JSFIDLE，它提供了我的超级糟糕的解决方案：与此相反，我想将后端简化为两件事：一个是执行工作的函数，另一个是用作查找值的表的对象。基本上： 1）使用对象存储文本，如中所示： var text = { key1: "<p>This is some text.<

最终目标是创建自包含的web文档，允许用户通过单击他们需要更多信息的对象来获取更多信息（如上下文或概念的定义），然后在div底部添加适当的文本，同时禁用单击的链接

显示我想要的效果比解释它更容易，所以这里有一个JSFIDLE，它提供了我的超级糟糕的解决方案：

与此相反，我想将后端简化为两件事：一个是执行工作的函数，另一个是用作查找值的表的对象。基本上：

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>"
};

var text={
按键1:“这是一些文本。”，
键2:“这是另一个文本。”，
键3:“这比那多了一些文本。”
};

2）单击时将密钥id传递给某个函数：

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

单击，此链接将提供更多文本

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

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

向字符串传递键应采用字符串

函数（'key1'）

的形式。然后，当尝试访问函数中的文本时，请改用此

text[key]

下面的例子

var text={
key1='hello'；
键2='hi'；
}
函数showText（键）{
//获得价值
变量a=文本[键]；
}

首先，您可以将单击

标记的

事件

以及所需的键传递给函数。然后，你可以添加一个类（或者你想要的任何其他方法）来禁止点击（虽然我认为这个行为有点不直观）。使用给定的键名访问属性，然后创建

元素并附加到

div

const text={
键1：“这是一些文本。”，
键2：“这是另一个文本。”，
键3：“这比那多了一些文字。”
};
const appendDiv=document.getElementById（“append”）
函数追加文本（事件、键）{
event.target.classList.toggle（“禁用”）
const newElementContent=文本[键]；
if（newElementContent）{
const newElement=document.createElement（“p”）；
newElement.textContent=newElementContent；
appendDiv.append（新元素）
}
}

。已禁用{
指针事件：无；
}

单击
点击
点击

我不确定其他两个是否回答了你的问题。但这是我能想到的最简单的解决办法。 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;

函数init（）{
变量文本={
“704e04ea-9f44-4183-af59-8b89067a7245”：“这是一些文本。”，
“3a5306d9-17e7-4414-a192-cf27d885b658”：“这是一些其他文本。”，
“704e04ea-7f44-4183-af59-8b89067a7245”：“这比那多了一些文字。”
};
var main=document.getElementById（“main”）；
var links=main.querySelectorAll（“a”）；
对于（变量i=0；i


HTML:

这里有个测试。这里就是这里

在这里工作：
在本例中，您只需要维护文本对象和其中使用的锚文本上的ID。您还可以在本例中的段落中嵌套链接，我认为其他解决方案没有提供这种链接。
Wow--这很有魅力！我累坏了。（禁用链接的原因是为了避免无休止地添加相同的文本——我不确定是否有更好的方法来处理它？）作为后续工作，为了使嵌套工作正常，我更改了document.createElement（“p”）到document.createElement（“div”）
和fromnewElement.textContent=newElementContent
tonewElement.innerHTML=newElementContent我想不出另一个解决方案，也许可以将其作为工具提示？我不知道。这个想法是给你一个追求的方向。主要的收获是有一个事件可用，以及如何在内联事件处理程序中传递另一个您喜欢的参数。好的——这与我最初处理它的方式非常接近，并且说明了嵌套的方式，Maaz Syed Adeeb的解决方案似乎不希望如此（大概五分钟前我就搞糟了）。这是纯JS！谢谢！很乐意帮忙：）
<!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>