first commit

历届学生/苏琪/项目练习/caipu/js/class.js

@@ -0,0 +1,48 @@
+
+// 好处！！
+// 1: 使用自执行函数，让函数自己运行
+// 2: 使用局部作用域避免变量和方法的污染
+(function (){
+
+  let lists = classDaras.result;
+  console.log(lists)
+
+  /**
+   * 1：只为了渲染页面
+   */
+  function RenderLeftMenu() {
+    lists.forEach(function(val,index) {
+      $(".view-left ul").append(`<li class="${ index == 0 ? 'active':'' }">${val.name}</li>`)
+    })
+  }
+
+  /**
+   * 绑定点击事件
+   */
+  function BindClick() {
+    $(".view-left ul li").on('click',function(){
+      
+      $(this).addClass('active').siblings().removeClass('active')
+      RenderRightMenu( $(".view-left ul li").index($(this)) )
+    })
+  }
+
+  /**
+   * 渲染右边对应的子分类
+   * @param {*} id 
+   */
+  function RenderRightMenu(id) {
+    $(".view-right ul").empty();
+    lists[id].list.forEach(val =>{
+      $(".view-right ul").append(`<li>
+                                    <a href="./list.html?id=${val.id}&status=true">${val.name}</a>
+                                  </li>`)
+    })
+  }
+
+  RenderLeftMenu()
+  BindClick()
+  RenderRightMenu(0)
+
+
+})()