Advertisement
corzopabloariel

Elementos múltiples

Jul 14th, 2020
135
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const __contenedorGENERAL = ".container__img";
  2.         const __contenedorIMG = ".element__img";
  3.         const __url = "url";//attr a buscar en el json
  4.  
  5.         function remove_(t) {
  6.             if (document.querySelectorAll(__contenedorIMG).length === 1) {
  7.                 alert("No puede eliminar este elemento");
  8.                 return null;
  9.             }
  10.             t.parentElement.remove();
  11.         }
  12.         /**
  13.          * t {OBJECT}
  14.          * class_ {String}
  15.          * obj {JSON}
  16.          */
  17.         function cloneElement(t, class_, obj = null) {
  18.             const element = document.querySelector(class_).parentElement.cloneNode(true);
  19.             element.querySelector("input[type='file']").value = "";
  20.             element.querySelector("input[type='hidden']").value = "";//mantiene la dirección de la imagen ya guardada
  21.             if (obj !== null) {
  22.                 element.querySelector("input[type='hidden']").value = obj[__url];
  23.                 //Se puede crear un preview de la imagen ya subida
  24.                 /**
  25.                  * let e = document.createElement("img");
  26.                  * e.src = `${path}${obj[__url]}`;
  27.                  * element.appendChild(e);
  28.                  */
  29.             }
  30.             document.querySelector(class_).closest(__contenedorGENERAL).appendChild(element);
  31.         }
  32.         document.addEventListener('DOMContentLoaded', () => {
  33.             /**
  34.              * RESPETAR la siguiente estructura o algo parecido
  35.              * [{url: "folder/nombre.jpg"}, {url: "folder/nombre1.jpg"}]
  36.              */
  37.             const elements = [{url: "folder/nombre.jpg"}, {url: "folder/nombre1.jpg"}];//lo que haya en la columna imagen correspondiente
  38.             elements.forEach((element,index) => {
  39.                 if (index === 0) {
  40.                     const objDiv = document.querySelector(__contenedorIMG);
  41.                     objDiv.querySelector("input[type='hidden']").value = element[__url];
  42.                     //Se puede crear un preview de la imagen ya subida
  43.                     /**
  44.                      * let e = document.createElement("img");
  45.                      * ...
  46.                      */
  47.                 } else
  48.                     cloneElement(null, '.img', element)
  49.             });
  50.         });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement