页面上有100个li,你知道怎么实现”点击li能console.log里面的内容“这个功能吗。


你可以通过使用JavaScript来实现这个功能。以下是一个简单的例子,假设你的HTML结构中有一个包含100个 <li> 元素的列表:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click LI Example</title>
</head>
<body>

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <!-- ... 其他 98 个 li 元素 ... -->
    <li>Item 100</li>
</ul>

<script>
    // 获取所有的 li 元素
    var listItems = document.querySelectorAll('#myList li');

    // 为每个 li 元素添加点击事件处理程序
    listItems.forEach(function (item, index) {
        item.addEventListener('click', function () {
            // 在控制台中输出被点击的 li 的内容
            console.log('Clicked on Item ' + (index + 1));
        });
    });
</script>

</body>
</html>

上述代码使用 document.querySelectorAll 获取所有的 <li> 元素,并为每个元素添加了一个点击事件处理程序。当点击任何一个 <li> 元素时,相应的内容将被输出到浏览器的控制台中。请确保你的浏览器的控制台是打开的,你可以通过按下 F12 键或右键点击页面并选择 "检查元素" 来打开控制台。


原文链接:codingdict.net