javascript onclick 获取列表

Question

我正在尝试在 html 列表元素上使用 onclick 函数。函数显示被调用，但我没有得到值。它在控制台中显示未定义。代码：

function display() {
  var x = document.getElementById('tags').selectedIndex;
  console.log(x);
}

<ul id="tags">
  <li id="android" value="android" onclick="display()">android</li>
  <li id="swing" value="swing" onclick="display()">swing</li>
  <li id="eclipse" value="eclipse" onclick="display()">eclipse</li>
  <li id="spring" value="spring" onclick="display()">spring</li>
  <li id="hibernate" value="hibernate" onclick="display()">hibernate</li>
<ul>

Answer 1

首先将“this”传递给函数，以便它知道调用的来源

<ul id="tags">
    <li id="android" value="android" onclick="display(this)">android</li>
    <li id="swing" value="swing" onclick="display(this)">swing</li>
    <li id="eclipse" value="eclipse" onclick="display(this)">eclipse</li>
    <li id="spring" value="spring" onclick="display(this)">spring</li>
    <li id="hibernate" value="hibernate" onclick="display(this)">hibernate</li>
<ul>

然后使用 getAttribute 获取值

function display(elm) {
  var x = elm.getAttribute('value');
  console.log(x);
}

仅供参考，如果您使用 jQuery，您可以直接访问 li，而无需将 onClick 属性添加到 LI 标记。

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function() {
    $('ul#tags li').click( function() {
        console.log($(this).attr('value'));
    });
});
</script>
<ul id="tags">
    <li id="android" value="android">android</li>
    <li id="swing" value="swing">swing</li>
    <li id="eclipse" value="eclipse">eclipse</li>
    <li id="spring" value="spring">spring</li>
    <li id="hibernate" value="hibernate">hibernate</li>
<ul>