根据从相邻元素传递的属性过滤数据_根据数据属性过滤显示的数据_根据元素ID设置元素的数据属性 - 腾讯云开发者社区

根据从相邻元素传递的属性过滤数据

基础概念

在前端开发中，根据从相邻元素传递的属性过滤数据通常涉及到DOM操作和事件处理。这种技术常用于响应用户交互，例如点击按钮来过滤列表中的数据。

类型

基于类名的过滤：通过元素的类名来过滤数据。
基于ID的过滤：通过元素的ID来过滤数据。
基于自定义属性的过滤：通过HTML5的自定义数据属性（data-*）来传递过滤条件。

应用场景

电子商务网站：用户可以通过点击不同的类别按钮来过滤商品列表。
社交媒体：用户可以通过点击不同的标签来过滤帖子。
数据可视化工具：用户可以通过选择不同的参数来过滤和查看数据。

示例代码

假设我们有一个简单的HTML列表和一个按钮，点击按钮会根据按钮上的文本过滤列表项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filter Data Example</title>
</head>
<body>
    <button id="filterBtn">Filter by Type</button>
    <ul id="itemList">
        <li class="type1">Item 1</li>
        <li class="type2">Item 2</li>
        <li class="type1">Item 3</li>
        <li class="type2">Item 4</li>
    </ul>

    <script>
        document.getElementById('filterBtn').addEventListener('click', function() {
            const filterType = this.textContent.toLowerCase();
            const items = document.querySelectorAll('#itemList li');
            items.forEach(item => {
                if (filterType === 'filter by type1' && item.classList.contains('type1')) {
                    item.style.display = 'block';
                } else if (filterType === 'filter by type2' && item.classList.contains('type2')) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>