单击<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添加到链接中？

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>

​