Widget:UnitCostumeControl

<script> function showCostume(costumeId) {

   var side_bar = document.getElementById('costume-sidebar');
   var square_boxes = side_bar.querySelectorAll('div');
   var len = square_boxes.length;
   var index = -1;
   for (var i = 0; i < len; i++) {
       if (square_boxes[i].id == costumeId) {
           index = i;
       }
   }
   if (index == -1) {
       alert("找不到皮肤：" + costumeId);
       return;
   }
   
   var name_list = document.getElementById('costume-name-list');
   var name_boxes = name_list.querySelectorAll('div');
   if (name_boxes.length != len) {
       alert("皮肤名称列表长度与皮肤方块数不一致！");
       return;
   }
   
   var image_list = document.getElementById('costume-image-list');
   var image_boxes = image_list.querySelectorAll('div');
   if (image_boxes.length != len) {
       alert("皮肤图片列表长度与皮肤方块数不一致！");
       return;
   }
   
   var decription_list = document.getElementById('costume-description-list');
   var decription_boxes = decription_list.querySelectorAll('div');
   if (decription_boxes.length != len) {
       alert("皮肤描述列表长度与皮肤方块数不一致！");
       return;
   }
   
   for (var i = 0; i < len; i++) {
       if (i == index) {
           name_boxes[i].style.display = "";
           image_boxes[i].style.display = "";
           decription_boxes[i].style.display = "";
           square_boxes[i].classList.add("square-selected");
       } else {
           name_boxes[i].style.display = "none";
           image_boxes[i].style.display = "none";
           decription_boxes[i].style.display = "none";
           square_boxes[i].classList.remove("square-selected");
       }
   }

} </script>