关键词

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>

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

本文链接:http://task.lmcjl.com/news/8338.html

展开阅读全文