Question

我一直在寻找，但我找到的只是JQuery的答案，我正在寻找一个香草的JS解决方案。

点击列表项后，我希望按钮文字更改为所点击的innerHTML的{{1}}。

我越来越近了，但不知怎的，li变量只返回最后一个list-item的current。

那么我需要更改什么才能将点击的innerHTML的{{1}}作为按钮文字？

innerHTML

li

我删除了这个下拉列表的CSS以保持清晰。

Answer 1

如评论中所述，更改

document.getElementById('dropbtn').innerHTML = current.innerHTML;

要

document.getElementById('dropbtn').innerHTML = event.target.innerHTML;

var clickHandler = function() {

  document.getElementById('dropbtn').innerHTML = event.target.innerHTML;

};

var dropdown = document.getElementById('dropdown');
var filterItem = dropdown.getElementsByTagName('LI')

for (var i = 0; i < filterItem.length; i++) {
  var current = filterItem[i];
  current.addEventListener('click', clickHandler, false);

}

<div class="dropdown">
  <a id="dropbtn">Menu</a>
  <ul id="dropdown" class="dropdown-content">
    <li>ALL</li>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
  </ul>
</div>

Answer 2

您正在收听点击事件，您可以使用该事件来识别该事件被触发的位置。

var clickHandler = function(e) {

  document.getElementById('dropbtn').innerHTML = e.target.innerHTML 

};

var dropdown = document.getElementById('dropdown');
var filterItem = dropdown.getElementsByTagName('li')
console.log(filterItem)

for (var i = 0; i < filterItem.length; i++) {
  var current = filterItem[i];
  current.addEventListener('click', clickHandler, false);

}

如何将按钮文本更改为单击列表项的innerHTML

2 个答案: