当一个<li>单击将单击的结果发送到 href

Question

这是我到目前为止所得到的，但不是将结果发送到<div> ，我需要将结果显示在<a href="Link-1"></a>以便它是一个链接。

 var listItems = document.querySelectorAll("ul li"); listItems.forEach(function(item) { item.onclick = function(e) { document.getElementById('output').innerText = this.innerText; } });

 <ul> <li>Link-1</li> <li>Link-2</li> <li>Link-3</li> <li>Link-4</li> <li>Link-5</li> </ul> <div id="output"></div>

添加了新代码

<?php
  while ($conn = $result->fetch_assoc()) {
?>  
  <li><a href="/Link-1/<?php echo $conn["area"]; ?>/"><?php echo $conn["area"]; ?></a></li>
<?php }?>

上面的代码<?php echo $conn["area"]; ?> <?php echo $conn["area"]; ?>从数据库中拉出一个城镇。

谢谢你把我推向正确的方向。 是否也可以将 php 添加到链接中？

Answer 1

也许你正在寻找这个：

 var listItems = document.querySelectorAll("ul li"); listItems.forEach(function(item) { item.onclick = function(e) { document.getElementById('output').innerHTML = '<a href="' + this.innerText + '">' + this.innerText +'</a>'; } });

 <ul> <li>Link-1</li> <li>Link-2</li> <li>Link-3</li> <li>Link-4</li> <li>Link-5</li> </ul> <div id="output"></div>

Answer 2

将div更改为锚点并更新textContent以及href属性。

在这个更新的答案中，我没有为每个列表项添加一个事件侦听器，而是将一个事件侦听器附加到列表中（事件委托）。 然后，我可以使用事件的target属性来识别单击了哪些项目，并使用该textContent来更新锚点。

 const anchor = document.querySelector('#anchor'); const list = document.querySelector('#list'); list.addEventListener('click', changeAnchor, false); function changeAnchor({ target: { textContent } }) { anchor.textContent = textContent; anchor.href = textContent; }

 <ul id="list"> <li>Link-1</li> <li>Link-2</li> <li>Link-3</li> <li>Link-4</li> <li>Link-5</li> </ul> <a id="anchor" />

Answer 3

您可以只检索列表元素的文本，通过将锚标记包装在引用占位符${}内的内部文本的反引号中，将其设置为带有模板文字的锚标记的href属性，然后使用 innerHTML 属性将其添加到你的#output div 是这样的：

 var listItems = document.querySelectorAll("ul li"); var output = document.getElementById('output'); listItems.forEach(item => { item.addEventListener('click', () => { output.innerHTML = `<a href="${item.innerText}">${item.innerText}</a>`; }); });

 <ul> <li>Link-1</li> <li>Link-2</li> <li>Link-3</li> <li>Link-4</li> <li>Link-5</li> </ul> <div id="output"></div>

Answer 4

您可以通过使用当前单击的元素的文本设置特定属性来创建链接元素：

 var listItems = document.querySelectorAll("ul li"); listItems.forEach(function(item) { item.onclick = function(e) { var a = document.createElement('a'); a.href = this.innerText; a.innerText = this.innerText; document.getElementById('output').append(a); } });

 <ul> <li>Link-1</li> <li>Link-2</li> <li>Link-3</li> <li>Link-4</li> <li>Link-5</li> </ul> <div id="output"></div>