JS实现点击li标签弹出对应的索引功能【案例】

JS实现点击li标签弹出对应的索引功能可以使用jQuery或原生JS实现。以下是详细的步骤：

1. HTML结构

首先需要创建一个ul列表，每个li元素上都应该有一个data属性，它的值为它所代表的元素在列表中的索引。

<ul id="list">
    <li data-index="0">Item 1</li>
    <li data-index="1">Item 2</li>
    <li data-index="2">Item 3</li>
    <li data-index="3">Item 4</li>
</ul>

2. 使用jQuery实现

如果使用jQuery实现，可以使用以下代码：

$('#list li').click(function() {
  var index = $(this).data('index');
  alert('你点击了第' + (index + 1) + '个元素');
});

简单来说，这段代码的意思就是，当你点击列表中的一个li元素时，获取它的data-index属性值，然后在弹出框中显示它在列表中的索引值+1（为了让数字从1开始计数）。

3. 使用原生JS实现

如果使用原生JS实现，可以使用以下代码：

var items = document.querySelectorAll('#list li');
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    var index = parseInt(this.getAttribute('data-index'));
    alert('你点击了第' + (index + 1) + '个元素');
  });
}

这段代码的含义和上面的代码是一样的，唯一的区别是它使用了原生的JavaScript，没有使用jQuery的库。它首先将列表中的所有li元素保存在一个数组中，然后可以使用addEventListener()方法向它们添加一个click事件侦听器。

示例说明

为了更好地理解如何实现这个功能，这里提供两个示例：

示例一

在这个示例中，我们使用jQuery，并为列表中的每个li元素添加了一个CSS类，以便在单击选项时更改其颜色：

<style>
.selected { background-color: #ffa500; }
</style>

<ul id="list">
    <li data-index="0">Item 1</li>
    <li data-index="1">Item 2</li>
    <li data-index="2">Item 3</li>
    <li data-index="3">Item 4</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#list li').click(function() {
  $('#list li').removeClass('selected');
  $(this).addClass('selected');
  var index = $(this).data('index');
  alert('你点击了第' + (index + 1) + '个元素');
});
</script>

这段代码的效果是，当你单击一个列表项时，它会突出显示，并显示它在列表中的索引值。

示例二

在这个示例中，我们将使用原生JS来实现相同的功能。我们还会更改alert（）函数，以便将消息显示在页面上，而不是在弹出窗口中。

<ul id="list">
    <li data-index="0">Item 1</li>
    <li data-index="1">Item 2</li>
    <li data-index="2">Item 3</li>
    <li data-index="3">Item 4</li>
</ul>

<script>
var items = document.querySelectorAll('#list li');
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    document.getElementById('result').innerHTML = '你点击了第' + (parseInt(this.getAttribute('data-index')) + 1) + '个元素';
  });
}
</script>

<p id="result"></p>

这段代码的效果是，当你单击一个列表项时，它会在页面顶部的段落元素中显示它在列表中的索引值。