前端写一个简单的菜单点菜

前端开发中，创建一个简单的菜单点菜功能通常涉及HTML、CSS和JavaScript的配合。以下是一个基本的步骤示例：

1. **HTML结构**:

<div id="menu">
  <h2>菜单</h2>
  <ul class="items">
    <li data-id="1" class="dish-item">菜品1 - 价格：$10</li>
    <li data-id="2" class="dish-item">菜品2 - 价格：$15</li>
    <!-- 添加更多菜品... -->
  </ul>
  <form id="order-form">
    <input type="number" id="quantity" placeholder="请输入数量">
    <button type="submit">添加到购物车</button>
  </form>
</div>

2. **CSS样式**:

.dish-item {
  display: flex;
  justify-content: space-between;
}

#order-form {
  margin-top: 20px;
}

3. **JavaScript事件处理**:

document.addEventListener('DOMContentLoaded', function() {
  const orderForm = document.getElementById('order-form');
  orderForm.addEventListener('submit', function(event) {
    event.preventDefault();
    
    const dishId = event.target.previousElementSibling.dataset.id;
    const quantity = parseInt(document.getElementById('quantity').value);
    
    // 这里只是一个模拟，实际应用需要与后端交互
    addToCart(dishId, quantity);
  });
  
  function addToCart(dishId, quantity) {
    console.log(`添加 ${dishId} ${quantity} 份到购物车`);
    // 根据实际情况更新UI或发送请求...
  }
});

在这个例子中，用户可以点击菜品列表中的选项，然后输入购买数量并提交表单。`addToCart`函数模拟了将选择的菜品和数量添加到购物车的操作，实际项目中会涉及到数据库操作或服务器API调用。