shajiabin/js/ui.js

(function () {
  let fragment = document.createDocumentFragment();
  // 记录当前是选中的维度
  let dimensionality = "3d";
  $("#3dbtn").css("background", "#ffffff70");
  $("#2dbtn").css("cursor", "pointer");
  $("#3dbtn").css("cursor", "pointer");

  // 获取地址栏信息
  let GetQueryString = (name) => {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return "";
  };
  let temp = GetQueryString("m");

  const arrAll = [];

  // 开启了分页得到的数组
  let arr = [];
  // 总数组分割
  let arrSpile = [];

  const getData = (infos) => {
    arrAll.length = 0;
    // 获取总数组
    for (let k in infos) {
      arrAll.push({
        id: k,
        name: infos[k],
      });
    }
    if (pageOpen) {
      // 数据的总数
      const total = arrAll.length;

      // 计算出分页的个数
      const pageSize = Math.ceil(total / pageNum);
      // 生成 分页 指示器
      const body = document.querySelector("body");
      const pageBox = document.createElement("div");
      pageBox.classList.add("pageBox");
      for (let i = 0; i < pageSize; i++) {
        const pageBoxSon = document.createElement("div");
        pageBoxSon.innerHTML = i + 1;
        pageBox.appendChild(pageBoxSon);

        // 当前的裁剪数据-联合数组类型
        arrSpile.push(arrAll.slice(i * pageNum, (i + 1) * pageNum));
      }
      body.appendChild(pageBox);

      // 为分页绑定点击事件
      const pageDomSonAll = document.querySelectorAll(".pageBox div");
      pageDomSonAll.forEach((v, i) => {
        v.addEventListener("click", () => {
          pageDomCreateFu(i);
        });
      });
    } else arr = arrAll;
  };

  getData(objInfo);

  // 绑定2D/3D按钮事件
  $("#2dbtn").on("click", function () {
    // alert("2dbtn被点击了!");
    dimensionality = "2d";
    $("#2dbtn").css("background", "#ffffff70");
    $("#3dbtn").css("background", "#ffffff21");
    // alert(dimensionality);
    getData(objInfo2d);
    pageDomCreateFu(0);
  });

  $("#3dbtn").on("click", function () {
    // alert("3dbtn被点击了!");
    dimensionality = "3d";
    $("#3dbtn").css("background", "#ffffff70");
    $("#2dbtn").css("background", "#ffffff21");
    // alert(dimensionality);
    getData(objInfo);
    pageDomCreateFu(0);
  });

  // 向页面创建元素
  const pageDomCreateFu = (acNum) => {
    if (pageOpen) {
      arr = arrSpile[acNum];
      //高亮当前
      const pageDomSonAll = document.querySelectorAll(".pageBox div");

      pageDomSonAll.forEach((v) => {
        v.classList.remove("active");
      });
      pageDomSonAll[acNum].classList.add("active");
    }

    let ul = document.querySelector(".con");
    ul.innerHTML = "";

    arr.forEach((v) => {
      let li = document.createElement("li");
      let divWrap = document.createElement("div");
      let a = document.createElement("a");
      let div = document.createElement("div");
      let p = document.createElement("p");
      divWrap.classList.add("case");
      a.classList.add("link-a");

      a.addEventListener("click", function () {
        if (dimensionality == "3d") {
          if (temp) a.href = `Model${temp}.html?m=${v.id}`;
          else a.href = `Model.html?m=${v.id}`;
        } else if (dimensionality == "2d") {
          a.href = `Model2D.html?m=${v.id}`;
        }
      });

      div.classList.add("card-img");
      div.style = `background-image: url(images/${v.id}.jpg)`;
      p.innerHTML = v.name;
      a.appendChild(div);
      divWrap.appendChild(a);
      li.appendChild(divWrap);
      li.appendChild(p);
      fragment.appendChild(li);
    });
    ul.appendChild(fragment);
  };

  pageDomCreateFu(0);
})();