JavaScript 实现特色菜点餐系统：点击展示详情、加减餐、计算总价

这个功能可以通过以下步骤使用 JavaScript 实现：

为每个特色菜创建一个对象，包括图片、价格、名称等信息。
在页面中创建一个特色菜列表，每个菜品都有一个点击事件。
点击特色菜时，将相应的菜品对象信息显示在右侧的菜品详情区域，包括图片、价格、名称等信息，并显示加减餐的界面。
使用 JavaScript 计算所选菜品的总价格，并将其显示在页面底部。

以下是一个简单的实现示例：

HTML 代码：

<div class='special-dishes'>
  <ul>
    <li data-id='1'>特色菜1</li>
    <li data-id='2'>特色菜2</li>
    <li data-id='3'>特色菜3</li>
  </ul>
</div>

<div class='dish-details'>
  <img src='' alt='' class='dish-image'>
  <h3 class='dish-name'></h3>
  <p class='dish-price'></p>
  <div class='add-remove'>
    <button class='btn-add'>加餐</button>
    <span class='dish-quantity'>1</span>
    <button class='btn-remove'>减餐</button>
  </div>
</div>

<div class='cart'>
  <h4>购物车</h4>
  <ul class='cart-items'></ul>
  <p class='cart-total'>总价：￥0</p>
</div>

JavaScript 代码：

// 定义特色菜品对象
var dishes = [
  {
    id: 1,
    name: '特色菜1',
    price: 38,
    image: 'dish1.jpg'
  },
  {
    id: 2,
    name: '特色菜2',
    price: 48,
    image: 'dish2.jpg'
  },
  {
    id: 3,
    name: '特色菜3',
    price: 58,
    image: 'dish3.jpg'
  }
];

// 获取页面元素
var dishList = document.querySelector('.special-dishes ul');
var dishImage = document.querySelector('.dish-image');
var dishName = document.querySelector('.dish-name');
var dishPrice = document.querySelector('.dish-price');
var btnAdd = document.querySelector('.btn-add');
var btnRemove = document.querySelector('.btn-remove');
var dishQuantity = document.querySelector('.dish-quantity');
var cartItems = document.querySelector('.cart-items');
var cartTotal = document.querySelector('.cart-total');

// 定义变量
var selectedDishes = [];
var total = 0;

// 渲染特色菜列表
dishes.forEach(function(dish) {
  var li = document.createElement('li');
  li.textContent = dish.name;
  li.dataset.id = dish.id;
  li.addEventListener('click', function() {
    renderDishDetails(dish);
  });
  dishList.appendChild(li);
});

// 渲染菜品详情
function renderDishDetails(dish) {
  dishImage.src = dish.image;
  dishName.textContent = dish.name;
  dishPrice.textContent = '￥' + dish.price.toFixed(2);
  dishQuantity.textContent = 1;
  btnAdd.addEventListener('click', function() {
    dishQuantity.textContent++;
  });
  btnRemove.addEventListener('click', function() {
    if (dishQuantity.textContent > 1) {
      dishQuantity.textContent--;
    }
  });
}

// 添加菜品到购物车
function addToCart(dish) {
  var li = document.createElement('li');
  li.textContent = dish.name + ' x ' + dishQuantity.textContent;
  cartItems.appendChild(li);
  selectedDishes.push({
    name: dish.name,
    price: dish.price,
    quantity: parseInt(dishQuantity.textContent)
  });
  total += dish.price * parseInt(dishQuantity.textContent);
  cartTotal.textContent = '总价：￥' + total.toFixed(2);
}

// 监听加入购物车按钮
btnAdd.addEventListener('click', function() {
  var dishId = parseInt(dishList.querySelector('.active').dataset.id);
  var dish = dishes.find(function(dish) {
    return dish.id === dishId;
  });
  addToCart(dish);
});

// 监听减少购物车按钮
btnRemove.addEventListener('click', function() {
  var dishId = parseInt(dishList.querySelector('.active').dataset.id);
  var dish = dishes.find(function(dish) {
    return dish.id === dishId;
  });
  selectedDishes.pop();
  total -= dish.price * parseInt(dishQuantity.textContent);
  cartItems.removeChild(cartItems.lastChild);
  cartTotal.textContent = '总价：￥' + total.toFixed(2);
});

// 监听特色菜点击事件
dishList.addEventListener('click', function(event) {
  var dishId = parseInt(event.target.dataset.id);
  var dish = dishes.find(function(dish) {
    return dish.id === dishId;
  });
  dishList.querySelectorAll('li').forEach(function(li) {
    li.classList.remove('active');
  });
  event.target.classList.add('active');
  renderDishDetails(dish);
});

这段代码中，首先定义了特色菜品对象数组 dishes，包括每个菜品的ID、名称、价格和图片。然后获取页面元素，并定义了一些变量，如选中的菜品数组 selectedDishes 和总价 total。

接下来，使用 forEach 方法渲染特色菜列表，为每个菜品添加点击事件，点击菜品时会调用 renderDishDetails 方法，将菜品详情信息显示在右侧的菜品详情区域。

在 renderDishDetails 方法中，根据传入的菜品对象渲染菜品详情信息，包括菜品图片、名称、价格和加减餐的按钮。点击加减餐按钮时会改变菜品数量的显示。

在 addToCart 方法中，将选中的菜品信息添加到购物车中，并计算购物车中所有菜品的总价，最后将总价显示在页面底部。

最后，监听加入购物车和减少购物车按钮的点击事件，并根据选中的菜品信息计算购物车中所有菜品的总价。监听特色菜点击事件，根据选中的菜品对象渲染菜品详情信息。