js基础---座位选择案例分析

深入解析座位选择功能的实现细节

在现代Web开发中，实现交互式功能是提升用户体验的关键。本文将深入探讨一个座位选择功能的实现，通过HTML、CSS和JavaScript的协同工作，让用户能够通过点击来选择或取消选择座位。我们将详细分析每个部分的代码，以及它们是如何协同工作的。

HTML结构详解

HTML是构建网页的基础，它定义了页面的结构和内容。在我们的座位选择功能中，HTML结构如下：

html 复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>座位选择功能演示</title>
    <style>
        /* CSS样式将在这里定义 */
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <!-- 更多的列表项 -->
        <li></li>
        <p style="clear:both;"></p>
        <div>屏幕中央</div>
    </ul>

    <script>
        // JavaScript代码将在这里编写
    </script>
</body>
</html>

列表结构

我们使用一个无序列表<ul>来包含所有的座位，每个座位是一个列表项<li>。这种结构的好处是它天然地支持列表项的排列，并且可以通过CSS轻松地进行样式定制。

清除浮动

在列表的末尾，我们使用了一个<p>标签，其样式设置为clear:both;。这是为了清除浮动布局可能带来的影响。在CSS中，浮动元素可能会导致父元素的高度塌陷，通过这种方式可以确保父元素能够正确地包含所有浮动的子元素。

CSS样式详解

CSS负责网页的视觉呈现。在我们的例子中，CSS不仅设置了基本的布局和样式，还定义了点击后的效果。

css 复制代码

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul {
    width: 560px;
    border: 3px solid #eee;
    margin: 0 auto;
}

li {
    width: 80px;
    height: 40px;
    background: #ccc;
    border: 1px solid #abc;
    float: left;
    margin: 5px;
    cursor: pointer;
}

div {
    width: 280px;
    height: 90px;
    border: 1px solid #ccc;
    margin: 0 auto;
    text-align: center;
    line-height: 90px;
    color: #333;
}

.click {
    font-size: 10px;
    text-align: center;
    line-height: 40px;
    font-family: '仿宋';
    font-weight: bold;
    color: #333;
    background: orange;
    border: 1px solid red;
}

列表项样式

每个列表项<li>被设置为宽度80px，高度40px，背景色为#ccc，边框为1px solid #abc。通过设置float: left;，所有列表项将水平排列。margin: 5px;为每个列表项提供了外部间距，使它们之间有间隔。

点击效果

.click类定义了点击后的样式。当列表项被点击时，这个类将被添加到列表项上，改变其背景色为橙色，边框为红色，同时文本内容也会改变。

JavaScript逻辑详解

JavaScript是实现交互功能的关键。在我们的例子中，JavaScript用于处理用户的点击事件，并根据点击状态改变列表项的样式和内容。

javascript 复制代码

let lis = document.getElementsByTagName('LI');
for(let i = 0; i < lis.length; i++){
    lis[i].onclick = function(){
        let res = this.getAttribute('class');
        if(!res){
            this.setAttribute('class','click');
            this.innerHTML = '座位已选';
        }else{
            this.setAttribute('class','');
            this.innerHTML = '';
        }
    }
}

获取元素

首先，我们使用document.getElementsByTagName('LI')获取所有的列表项元素，并将它们存储在变量lis中。

事件绑定

接着，我们遍历所有的列表项，为每个列表项绑定点击事件。在点击事件的处理函数中，我们首先检查当前列表项是否已经具有click类。

状态切换

如果列表项没有click类，说明该座位尚未被选择，我们为其添加click类，并设置内部HTML为"座位已选"。如果已经具有click类，说明座位已经被选择，我们则移除该类，并清空内部HTML，表示座位未被选择。

性能优化：事件委托

在上述代码中，我们为每个列表项单独绑定了事件监听器。这种方法虽然直观，但在列表项数量很多时，会消耗较多的内存和性能。一个更高效的方法是使用事件委托。

事件委托利用了事件冒泡的原理，即事件会从其触发的最深的元素开始，逐层向上传播，直到被处理，或传播到文档的根元素。我们可以将事件监听器绑定到父元素（在本例中是<ul>），然后根据事件的目标元素（event.target）来判断点击的是哪个列表项。

javascript 复制代码

document.querySelector('ul').addEventListener('click', function(event){
    if(event.target.tagName === 'LI'){
        let res = event.target.getAttribute('class');
        if(!res){
            event.target.setAttribute('class','click');
            event.target.innerHTML = '座位已选';
        }else{
            event.target.setAttribute('class','');
            event.target.innerHTML = '';
        }
    }
});

通过这种方式，无论列表中有多少个列表项，我们只需要一个事件监听器，从而大大提高了性能。

总结

通过HTML定义结构，CSS控制样式，以及JavaScript处理交互，我们实现了一个简单的座位选择功能。这个功能不仅展示了前端开发的基本技术，还涉及到了性能优化的高级概念。希望本文的详细解析能帮助你更好地理解和实现类似的交互式功能。