Javascript - 循环导航答案

【问题标题】：Javascript - Navigation as a loopJavascript - 循环导航
【发布时间】：2021-05-21 19:12:10
【问题描述】：

我想创建一个简单的导航：

<ul>
    <li><a href="#div1">Div1-name</a></li>
    <li><a href="#div2">Div2-name</a></li>
    <li><a href="#div3">Div3-name</a></li>
</ul>

单击时，它会转到具有该 id 的 div。我不想永久这样做，它应该在循环中改变，因为用户可以添加新项目并希望它们被循环。

用户添加新的 div - 具有唯一的名称和 ID。如何构造循环？

最好为div设置一个常量类（例如gohere），你必须通过javascript加载它，然后循环执行li元素。

谁能帮忙？

这些是用户添加的元素：

<div class="divdiv" id="div_id">
    <h3>DIV TITLE</h3>
    <br>
        Description
    <br>
    <p>Description</p>
    <hr>
</div>

【问题讨论】：

我认为您可能需要澄清您的意思，我正在努力理解这个“循环”。你说的是轮播式组件吗？
@DBS No. 循环列出项目（ul / li）。下面是一个 PHP 示例： listed() as $item): ?>
= html($item->title()) ?>

【解决方案1】：

好的，很难准确理解您的要求，但这里（有点老套）一个例子。我希望它可以帮助您朝着正确的方向前进。

var items = document.getElementById('items');
var main = document.getElementById('main');

items.addEventListener('click', e => {
  e.preventDefault();
  if (e.target.nodeName == 'A') {
    console.log(`You clicked ${e.target.attributes['href'].value}`);
  }
});

document.forms.new.addEventListener('submit', e => {
  e.preventDefault();
  let newid = items.children.length + 1;
  console.log(newid);
  let li = `<li><a href="#div${newid}">Div${newid}-name</a></li>`;
  items.innerHTML += li;
  let div = `<div class="divdiv" id="div${newid}">
    <h3>DIV TITLE</h3><br>Description<br><p>Description</p><hr></div>`;
  main.innerHTML += div;
});

<ul id="items">
  <li><a href="#div1">Div1-name</a></li>
  <li><a href="#div2">Div2-name</a></li>
  <li><a href="#div3">Div3-name</a></li>
</ul>

<form name="new">
  <button>Add new</button>
</form>

<div id="main"></div>

【讨论】：

【解决方案2】：

将导航详细信息保存在一个数组中，然后对其进行迭代。
使用 DOMParser 解析用户添加的 HTML 以提取导航信息。

const arr = [
  { href: "div1", name: 'Div1-name' },
  { href: "div2", name: 'Div2-name' },
  { href: "div3", name: 'Div3-name' }
];

const nav = document.querySelector('#nav');
const main = document.querySelector('#main');
const text = document.querySelector('textarea');
const button = document.querySelector('button');

button.addEventListener('click', handleInput, false);

const parser = new DOMParser();

function handleInput() {

  // Add the HTML to the page
  main.insertAdjacentHTML('beforeend', text.value);

  // Parse the HTML
  const frag = parser.parseFromString(text.value, 'text/html');
   
  // Extract the id (href) and name
  const href = frag.querySelector('div').id;
  const name = frag.querySelector('h3').textContent;

  // Add this to the navigation array
  // to the array
  arr.push({ href: `#${href}`, name: name });
  updateView();
}

function updateView() {

  // `map` is useful here. It will produce a new array
  // (of HTML), but make sure you `join` it up at the end
  const links = arr.map(({ href, name }) => {
    return `<li><a href="${href}">${name}</a></li>`;
  }).join('');
  nav.innerHTML = `<ul>${links}</ul>`;
}

updateView();

<div id="nav"></div>
 
Add HTML:
<textarea></textarea>
<button>Add</button>

<div id="main"></div>

【讨论】：

谢谢，但我想我写错了。我的英语很差。用户将这些项目添加为 PRESTA 中的块。它只是添加了一个具有唯一标题和 ID 的女主角。只有名称会出现在导航中。所以 Javascript 需要获取这些添加项的 ID / Title 并作为导航循环它们。
那么用户是否只是在文本框中添加了该 HTML，而您却在问如何从该 HTML 中获取详细信息？
完全正确 :) 用户从 HTML 添加块。当然，标题和 ID 在那里发生了变化。导航是这些 HTML 块的标题和 ID 的列表。
不幸的是它不起作用：/很可能我误解了它。您能否编写此代码仅用于元素解析？如果没有这些按钮等，则不需要。因为我尝试并在控制台中出现错误。你能测试一下代码吗？再次感谢您的帮助。
我用您在问题中提供的 HTML 对其进行了测试，效果很好。