JQuery中html元素的DOM操作，动态添加删除：菜品类别和菜品类别对应的菜品 - 作业

首页 > 博客列表 > JQuery中html元素的DOM操作，动态添加删除：菜品类别和菜品类别对应的菜品

博主信息

博文 64

粉丝 6

访问量 102162

专题推荐

更多>

学习总结

1. jquery中如果想删除一个元素，必须先用empty()删除这个元素下的子元素，然后再用remove()删除该元素

2. `remove(‘active’)`可以删除`class='active'`的所有元素

3. jquery中使用$()工厂函数时，可以使用元素的属性值选择器`$("form>.listItem[data-food-index=1"]>div")`,`data-food-index`是`listItem`的属性

4. append(‘html代码’)添加元素时，可以直接写html代码

动态添加删除菜品类别和菜品index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JQuery对html元素的基本操作</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/jquery-3.5.1.js"></script>
  </head>
  <body>
    <form action="">
      <div>
        <input
          type="text"
          name="tabCard"
          id="tabCard"
          placeholder="添加菜品类别"
        />
        <button id="addTabBtn" type="button">添加菜品类别</button>
      </div>
      <div>
        <input type="text" name="item" id="item" placeholder="添加菜品" />
        <button id="addTabItemBtn" type="button">添加菜品</button>
      </div>
      <div class="listTab">
        <div data-food-index="1">凉菜</div>
        <div class="active" data-food-index="2">热菜</div>
        <div data-food-index="3">甜品</div>
        <div data-food-index="4">酒水</div>
      </div>
      <div class="listItem" data-food-index="1">
        <div class="active" data-food-detail="1">五香酱牛肉</div>
        <div data-food-detail="2">凉拌笋丝</div>
        <div data-food-detail="3">果仁菠菜</div>
        <div data-food-detail="4">大拌菜</div>
      </div>
      <div class="listItem active" data-food-index="2">
        <div class="active" data-food-detail="1">宫爆鸡丁</div>
        <div data-food-detail="2">鱼香肉丝</div>
        <div data-food-detail="3">锅包肉</div>
        <div data-food-detail="4">木须肉</div>
      </div>
      <div class="listItem" data-food-index="3">
        <div class="active" data-food-detail="1">蛋糕</div>
        <div data-food-detail="2">冰淇淋</div>
        <div data-food-detail="3">蛋挞</div>
        <div data-food-detail="4">饼干</div>
      </div>
      <div class="listItem" data-food-index="4">
        <div class="active" data-food-detail="1">橙汁</div>
        <div data-food-detail="2">啤酒</div>
        <div data-food-detail="3">二锅头</div>
        <div data-food-detail="4">雪碧</div>
      </div>
      <button id="delTabBtn" type="button">删除菜品类别</button>
      <button id="delTabItemBtn" type="button">删除菜品</button>
    </form>
  </body>
</html>
<script>
  //---------------------------------------------------
  //添加类别按钮
  var addTabBtn = $("form #addTabBtn");
  addTabBtn.click(function () {
    var tabInput = $("form #tabCard");
    //val()方法，获取form中input的值
    if (tabInput.val().trim() !== "") {
      //添加一个新选项卡，并设置为高亮
      var index;
      //parseInt(字符串)字符串转为数值
      //typeof()返回变量值的类型
      if (
        typeof $("form>.listTab>div:last-of-type").attr("data-food-index") ===
        "undefined"
      ) {
        index = 1;
      } else {
        index =
          parseInt(
            $("form>.listTab>div:last-of-type").attr("data-food-index")
          ) + 1;
      }
      $("form>.listTab").append("<div>" + tabInput.val().trim() + "</div>");
      var tabs = $("form>.listTab>div");
      delClass(tabs);
      var lastTab = $("form>.listTab>div:last-of-type");
      lastTab.attr("data-food-index", index);
      $(lastTab).addClass("active");
      //添加一个新的选项卡内容，并设置为高亮
      console.log();
      var lastItem = $("form>.listItem:last-of-type");
      //如果当前没有菜品列表，则插入到菜品类别后面
      if (lastItem.length === 0) {
        $("form>.listTab").after('<div class="listItem"></div>');
      } else {
        lastItem.after('<div class="listItem"></div>');
        var items = $("form>.listItem");
        delClass(items);
      }
      $("form>.listItem:last-of-type").attr("data-food-index", index);
      $("form>.listItem:last-of-type").addClass("active");
    }
    //val(值)，可以设置input的值
    tabInput.val("");
    tabInput.focus();
  });
  //----------------------------------------------
  //为类别列表添加点击事件
  $("form .listTab").click(function (ev) {
    // map(回调)遍历元素
    if (ev.target !== ev.currentTarget) {
      var tabs = $("form>.listTab>div");
      delClass(tabs);
      $(ev.target).addClass("active");
      var items = $("form>.listItem");
      delClass(items);
      $(items).map(function (index, item) {
        if (
          $(item).attr("data-food-index") ===
          $(ev.target).attr("data-food-index")
        ) {
          $(item).addClass("active");
        }
      });
    }
  });
  //--------------------------------------------------
  //添加菜品按钮
  var addTabItemBtn = $("form #addTabItemBtn");
  addTabItemBtn.click(function () {
    var itemInput = $("form #item");
    //val()方法，获取form中input的值
    if (itemInput.val().trim() !== "") {
      var items = $("form>.listItem");
      items.map(function (index, item) {
        if ($(item).hasClass("active")) {
          var index = $(item).attr("data-food-index");
          var foodList = $("form>.listItem[data-food-index=" + index + "]>div");
          delClass(foodList);
          $(item).append(
            "<div class='active' data-food-detail=" +
              (foodList.length + 1) +
              ">" +
              itemInput.val().trim() +
              "</div>"
          );
        }
      });
    }
    //val(值)，可以设置input的值
    itemInput.val("");
    itemInput.focus();
  });
  //----------------------------------------------
  //为菜品列表添加点击事件
  $("form>.listItem").click(function (ev) {
    if (ev.target !== ev.currentTarget) {
      var foodDetail = $("form>div[class='listItem active']>div");
      delClass(foodDetail);
      $(ev.target).addClass("active");
    }
  });
  //------------------------------
  //删除列表活动样式
  function delClass(delList) {
    //each(回调)遍历元素
    delList.each(function (index, delItem) {
      // hasClass(class属性)判断是否存在class属性
      if ($(delItem).hasClass("active")) {
        //removeClass()移除类样式
        $(delItem).removeClass("active");
      }
    });
  }
  //删除类别按钮
  var delTabBtn = $("form #delTabBtn");
  delTabBtn.click(function () {
    tabs = $("form>.listTab>div");
    tabs.remove(".active");
    if (tabs.length !== 0) {
      tabs.each(function (index, tab) {
        if ($(tab).hasClass("active")) {
          if (index === 0) {
            $(tabs[index + 1]).addClass("active");
            var foodIndex = $(tabs[index + 1]).attr("data-food-index");
          } else {
            $(tabs[index - 1]).addClass("active");
            var foodIndex = $(tabs[index - 1]).attr("data-food-index");
          }
          //empty(元素)删除元素的子元素
          $("form>.listItem.active").empty();
          $('form>div[class = "listItem active"]').remove();
          $("form>.listItem").each(function (index, item) {
            if ($(item).attr("data-food-index") === foodIndex) {
              $(item).addClass("active");
            }
          });
          return false;
        }
      });
    }
  });
  //删除菜品按钮
  var delTabItemBtn = $("form #delTabItemBtn");
  delTabItemBtn.click(function () {
    //选中正在显示的菜品列表下在菜品
    var foods = $('form>div[class="listItem active"]>div');
    //删除选中的菜品
    foods.remove(".active");
    if (foods.length - 1 !== 0) {
      foods.each(function (index, food) {
        //如果当前是第一个被选中，则它的下一个设置为高亮，否则它的上一个设置为高亮
        if ($(food).hasClass("active")) {
          if (index === 0) {
            $(foods[index + 1]).addClass("active");
            return false;
          } else {
            $(foods[index - 1]).addClass("active");
            return false;
          }
        }
      });
    }
  });
</script>

样式表 index.css


* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-size: 12px;
}
/* form表单，动态生成选项卡 */
form {
  margin: 10px 10px;
  padding: 10px 10px;
  width: 600px;
  height: 360px;
  border: 1px solid #313c46;
  display: grid;
  grid-template-columns: 280px 280px;
  grid-template-rows: 1fr 250px 1fr;
  grid-auto-flow: row;
  gap: 10px;
  justify-content: space-evenly;
  align-items: center;
}
form > div > input {
  height: 30px;
  width: 150px;
  font-size: 1.2rem;
}
form button {
  height: 30px;
}
/* 选项卡 */
form > .listTab {
  border: 1px solid #ccc;
  padding: 10px;
  height: 250px;
  overflow: auto;
  background-color: white;
}
form > .listTab > div.active {
  background-color: lightseagreen;
  color: white;
}
/* 选项卡内容 */
form > .listItem {
  border: 1px solid #ccc;
  padding: 10px;
  height: 250px;
  overflow: auto;
  display: none;
}
form > .listItem.active {
  display: block;
}
form > .listItem > div.active {
  background-color: lightseagreen;
  color: white;
}
/* 中间两个列表中内容的样式 */
form > div > div {
  height: 30px;
  font-size: 1.3rem;
}
form > div > div:hover {
  cursor: pointer;
  background-color: lightgreen;
}