jquery 仿外卖平台

云浩坤 3个月前 31浏览 0评论

jQuery是一款广泛应用于前端开发的JavaScript库,通过它,我们可以快速地编写各种交互效果、动画、AJAX等功能。在本文中,我们将借助jQuery实现一个仿外卖平台的页面。

$(function() {
  // 绑定导航栏按钮的点击事件
  $('.nav-btn').click(function() {
    $(this).toggleClass('active');
    $('.nav-list').slideToggle();
  });
  
  // 绑定搜索框的键盘输入事件
  $('.search-box').keyup(function() {
    var keyword = $(this).val().toLowerCase();
    $('.food-item').each(function() {
      var name = $(this).data('name').toLowerCase();
      if (name.indexOf(keyword) !== -1) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  });
  
  // 绑定购物车按钮的点击事件
  $('.cart-btn').click(function() {
    $('.cart-list').slideToggle();
  });
  
  // 绑定添加到购物车按钮的点击事件
  $('.add-to-cart-btn').click(function() {
    var $foodItem = $(this).closest('.food-item');
    var foodName = $foodItem.data('name');
    var foodPrice = $foodItem.data('price');
    addCartItem(foodName, foodPrice);
  });
  
  // 添加商品到购物车
  function addCartItem(name, price) {
    var $cartItem = $('.cart-item[data-name="' + name + '"]');
    if ($cartItem.length > 0) {
      var quantity = parseInt($cartItem.find('.quantity').text()) + 1;
      $cartItem.find('.quantity').text(quantity);
    } else {
      var html = '
' + '' + name + '' + '' + price + '' + '1' + '
'; $('.cart-list').append(html); } } });

在上述代码中,我们使用了多个jQuery的常用方法,如点击事件绑定、样式切换、动画效果、遍历元素等。通过这些方法的组合,我们实现了导航栏按钮的展开/收起、搜索框的关键字匹配效果、购物车的添加商品和展开/收起等功能。

在实际开发中,需要注意组织代码的结构和层次,尽可能避免出现复杂的嵌套和冗长的代码。同时,还要封装重复性高的代码段,以实现代码的可复用性和扩展性。