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

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属性。

在此更新的答案中，我没有将事件侦听器添加到每个列表项，而是将一个侦听器附加到列表（event delegation）。然后，我可以使用事件的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

您只需检索列表元素的文本，并通过将锚标签包裹在引用内部的占位符{{1}的反引号中，即可将其设置为带有template literals的锚标签的href属性}}，然后使用innerHTML属性将其添加到您的${} div中，如下所示：

#output

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>`;
  });
});

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>

单击<li>时，将单击的结果发送到href

4 个答案: