简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

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

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

王娇
王娇原创
2020年06月01日 17:46:551020浏览

学习总结

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

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>JQuery对html元素的基本操作</title>
  8.     <link rel="stylesheet" href="css/index.css" />
  9.     <script src="js/jquery-3.5.1.js"></script>
  10.   </head>
  11.   <body>
  12.     <form action="">
  13.       <div>
  14.         <input
  15.           type="text"
  16.           name="tabCard"
  17.           id="tabCard"
  18.           placeholder="添加菜品类别"
  19.         />
  20.         <button id="addTabBtn" type="button">添加菜品类别</button>
  21.       </div>
  22.       <div>
  23.         <input type="text" name="item" id="item" placeholder="添加菜品" />
  24.         <button id="addTabItemBtn" type="button">添加菜品</button>
  25.       </div>
  26.       <div class="listTab">
  27.         <div data-food-index="1">凉菜</div>
  28.         <div class="active" data-food-index="2">热菜</div>
  29.         <div data-food-index="3">甜品</div>
  30.         <div data-food-index="4">酒水</div>
  31.       </div>
  32.       <div class="listItem" data-food-index="1">
  33.         <div class="active" data-food-detail="1">五香酱牛肉</div>
  34.         <div data-food-detail="2">凉拌笋丝</div>
  35.         <div data-food-detail="3">果仁菠菜</div>
  36.         <div data-food-detail="4">大拌菜</div>
  37.       </div>
  38.       <div class="listItem active" data-food-index="2">
  39.         <div class="active" data-food-detail="1">宫爆鸡丁</div>
  40.         <div data-food-detail="2">鱼香肉丝</div>
  41.         <div data-food-detail="3">锅包肉</div>
  42.         <div data-food-detail="4">木须肉</div>
  43.       </div>
  44.       <div class="listItem" data-food-index="3">
  45.         <div class="active" data-food-detail="1">蛋糕</div>
  46.         <div data-food-detail="2">冰淇淋</div>
  47.         <div data-food-detail="3">蛋挞</div>
  48.         <div data-food-detail="4">饼干</div>
  49.       </div>
  50.       <div class="listItem" data-food-index="4">
  51.         <div class="active" data-food-detail="1">橙汁</div>
  52.         <div data-food-detail="2">啤酒</div>
  53.         <div data-food-detail="3">二锅头</div>
  54.         <div data-food-detail="4">雪碧</div>
  55.       </div>
  56.       <button id="delTabBtn" type="button">删除菜品类别</button>
  57.       <button id="delTabItemBtn" type="button">删除菜品</button>
  58.     </form>
  59.   </body>
  60. </html>
  62. <script>
  63.   //---------------------------------------------------
  64.   //添加类别按钮
  65.   var addTabBtn = $("form #addTabBtn");
  66.   addTabBtn.click(function () {
  67.     var tabInput = $("form #tabCard");
  68.     //val()方法，获取form中input的值
  69.     if (tabInput.val().trim() !== "") {
  70.       //添加一个新选项卡，并设置为高亮
  71.       var index;
  72.       //parseInt(字符串)字符串转为数值
  73.       //typeof()返回变量值的类型
  74.       if (
  75.         typeof $("form>.listTab>div:last-of-type").attr("data-food-index") ===
  76.         "undefined"
  77.       ) {
  78.         index = 1;
  79.       } else {
  80.         index =
  81.           parseInt(
  82.             $("form>.listTab>div:last-of-type").attr("data-food-index")
  83.           ) + 1;
  84.       }
  86.       $("form>.listTab").append("<div>" + tabInput.val().trim() + "</div>");
  87.       var tabs = $("form>.listTab>div");
  88.       delClass(tabs);
  90.       var lastTab = $("form>.listTab>div:last-of-type");
  91.       lastTab.attr("data-food-index", index);
  93.       $(lastTab).addClass("active");
  94.       //添加一个新的选项卡内容，并设置为高亮
  95.       console.log();
  96.       var lastItem = $("form>.listItem:last-of-type");
  97.       //如果当前没有菜品列表，则插入到菜品类别后面
  98.       if (lastItem.length === 0) {
  99.         $("form>.listTab").after('<div class="listItem"></div>');
  100.       } else {
  101.         lastItem.after('<div class="listItem"></div>');
  102.         var items = $("form>.listItem");
  103.         delClass(items);
  104.       }
  105.       $("form>.listItem:last-of-type").attr("data-food-index", index);
  106.       $("form>.listItem:last-of-type").addClass("active");
  107.     }
  108.     //val(值)，可以设置input的值
  109.     tabInput.val("");
  110.     tabInput.focus();
  111.   });
  112.   //----------------------------------------------
  113.   //为类别列表添加点击事件
  114.   $("form .listTab").click(function (ev) {
  115.     // map(回调)遍历元素
  116.     if (ev.target !== ev.currentTarget) {
  117.       var tabs = $("form>.listTab>div");
  118.       delClass(tabs);
  119.       $(ev.target).addClass("active");
  121.       var items = $("form>.listItem");
  122.       delClass(items);
  123.       $(items).map(function (index, item) {
  124.         if (
  125.           $(item).attr("data-food-index") ===
  126.           $(ev.target).attr("data-food-index")
  127.         ) {
  128.           $(item).addClass("active");
  129.         }
  130.       });
  131.     }
  132.   });
  134.   //--------------------------------------------------
  135.   //添加菜品按钮
  136.   var addTabItemBtn = $("form #addTabItemBtn");
  137.   addTabItemBtn.click(function () {
  138.     var itemInput = $("form #item");
  139.     //val()方法，获取form中input的值
  140.     if (itemInput.val().trim() !== "") {
  141.       var items = $("form>.listItem");
  142.       items.map(function (index, item) {
  143.         if ($(item).hasClass("active")) {
  144.           var index = $(item).attr("data-food-index");
  145.           var foodList = $("form>.listItem[data-food-index=" + index + "]>div");
  146.           delClass(foodList);
  147.           $(item).append(
  148.             "<div class='active' data-food-detail=" +
  149.               (foodList.length + 1) +
  150.               ">" +
  151.               itemInput.val().trim() +
  152.               "</div>"
  153.           );
  154.         }
  155.       });
  156.     }
  157.     //val(值)，可以设置input的值
  158.     itemInput.val("");
  159.     itemInput.focus();
  160.   });
  162.   //----------------------------------------------
  163.   //为菜品列表添加点击事件
  164.   $("form>.listItem").click(function (ev) {
  165.     if (ev.target !== ev.currentTarget) {
  166.       var foodDetail = $("form>div[class='listItem active']>div");
  167.       delClass(foodDetail);
  168.       $(ev.target).addClass("active");
  169.     }
  170.   });
  171.   //------------------------------
  172.   //删除列表活动样式
  173.   function delClass(delList) {
  174.     //each(回调)遍历元素
  175.     delList.each(function (index, delItem) {
  176.       // hasClass(class属性)判断是否存在class属性
  177.       if ($(delItem).hasClass("active")) {
  178.         //removeClass()移除类样式
  179.         $(delItem).removeClass("active");
  180.       }
  181.     });
  182.   }
  184.   //删除类别按钮
  185.   var delTabBtn = $("form #delTabBtn");
  186.   delTabBtn.click(function () {
  187.     tabs = $("form>.listTab>div");
  188.     tabs.remove(".active");
  189.     if (tabs.length !== 0) {
  190.       tabs.each(function (index, tab) {
  191.         if ($(tab).hasClass("active")) {
  192.           if (index === 0) {
  193.             $(tabs[index + 1]).addClass("active");
  194.             var foodIndex = $(tabs[index + 1]).attr("data-food-index");
  195.           } else {
  196.             $(tabs[index - 1]).addClass("active");
  197.             var foodIndex = $(tabs[index - 1]).attr("data-food-index");
  198.           }
  200.           //empty(元素)删除元素的子元素
  201.           $("form>.listItem.active").empty();
  202.           $('form>div[class = "listItem active"]').remove();
  203.           $("form>.listItem").each(function (index, item) {
  204.             if ($(item).attr("data-food-index") === foodIndex) {
  205.               $(item).addClass("active");
  206.             }
  207.           });
  208.           return false;
  209.         }
  210.       });
  211.     }
  212.   });
  213.   //删除菜品按钮
  214.   var delTabItemBtn = $("form #delTabItemBtn");
  215.   delTabItemBtn.click(function () {
  216.     //选中正在显示的菜品列表下在菜品
  217.     var foods = $('form>div[class="listItem active"]>div');
  218.     //删除选中的菜品
  219.     foods.remove(".active");
  220.     if (foods.length - 1 !== 0) {
  221.       foods.each(function (index, food) {
  222.         //如果当前是第一个被选中，则它的下一个设置为高亮，否则它的上一个设置为高亮
  223.         if ($(food).hasClass("active")) {
  224.           if (index === 0) {
  225.             $(foods[index + 1]).addClass("active");
  226.             return false;
  227.           } else {
  228.             $(foods[index - 1]).addClass("active");
  229.             return false;
  230.           }
  231.         }
  232.       });
  233.     }
  234.   });
  235. </script>

样式表 index.css

  2. * {
  3.   padding: 0px;
  4.   margin: 0px;
  5.   box-sizing: border-box;
  6.   font-size: 12px;
  7. }
  8. /* form表单，动态生成选项卡 */
  9. form {
  10.   margin: 10px 10px;
  11.   padding: 10px 10px;
  12.   width: 600px;
  13.   height: 360px;
  14.   border: 1px solid #313c46;
  15.   display: grid;
  16.   grid-template-columns: 280px 280px;
  17.   grid-template-rows: 1fr 250px 1fr;
  18.   grid-auto-flow: row;
  19.   gap: 10px;
  20.   justify-content: space-evenly;
  21.   align-items: center;
  22. }
  23. form > div > input {
  24.   height: 30px;
  25.   width: 150px;
  26.   font-size: 1.2rem;
  27. }
  28. form button {
  29.   height: 30px;
  30. }
  31. /* 选项卡 */
  32. form > .listTab {
  33.   border: 1px solid #ccc;
  34.   padding: 10px;
  35.   height: 250px;
  36.   overflow: auto;
  37.   background-color: white;
  38. }
  39. form > .listTab > div.active {
  40.   background-color: lightseagreen;
  41.   color: white;
  42. }
  44. /* 选项卡内容 */
  45. form > .listItem {
  46.   border: 1px solid #ccc;
  47.   padding: 10px;
  48.   height: 250px;
  49.   overflow: auto;
  50.   display: none;
  51. }
  52. form > .listItem.active {
  53.   display: block;
  54. }
  55. form > .listItem > div.active {
  56.   background-color: lightseagreen;
  57.   color: white;
  58. }
  60. /* 中间两个列表中内容的样式 */
  61. form > div > div {
  62.   height: 30px;
  63.   font-size: 1.3rem;
  64. }
  65. form > div > div:hover {
  66.   cursor: pointer;
  67.   background-color: lightgreen;
  68. }

代码效果图

上一条：Thinkphp:读取器和修改器下一条：js 选项卡和轮播图的实现
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多