Как я могу добавить строку в div, ссылаясь на ключ объекта? - PullRequest
Новая
       2

Как я могу добавить строку в div, ссылаясь на ключ объекта?

2 голосов
/ 27 апреля 2019

Конечная цель - создать автономный веб-документ, который позволяет пользователю получать больше информации о чем-либо (например, контекст или определение концепции), щелкая мышью на предмете, о котором он хочет получить дополнительную информацию, и затем добавляет соответствующий текст в нижней части 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) Передать идентификатор ключа при нажатии какой-либо функции: 

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

3) Эта функция использует ключ для получения правильной строки, добавляет строку в div и затем отключает ссылку.

Я слишком много времени смотрел на это, и теперь не могу определить, близок ли я к решению или очень далек от него!

Ответы [ 3 ]

1 голос
/ 27 апреля 2019

Во-первых, вы можете передать функцию event щелчка по тегу a функции вместе с нужной клавишей.Затем вы можете добавить класс (или любой другой способ, которым вы хотите), чтобы отключить щелчок (хотя я бы посчитал, что это поведение немного не интуитивно понятно).

Получите доступ к свойству с данным именем ключа, а затем создайте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>
0 голосов
/ 27 апреля 2019

Я не уверен, что другие два ответа отвечают на ваш вопрос. Но это самое простое решение, которое я мог придумать. 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

В этом примере вам нужно только сохранить текстовый объект и идентификаторы для текста привязки, используемого в нем. В этом примере вы также можете вкладывать ссылки в абзацы, которые, как я думаю, не предоставили другие решения.

0 голосов
/ 27 апреля 2019

Передача ключа в строку должна быть в форме строки function('key1').Затем при попытке получить доступ к тексту в функции используйте вместо этого text[key] Пример ниже 

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

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

Затем вы можете передать showText на экран и показать или сделать то, что вы хотите, с помощью

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...