0

estoy realizando un sistema de ventas y me estoy complicando con una parte, donde quiero que al agregar una unidad mas de un determinado producto, el sistema me agregue unas opciones de ese producto. Ejemplo agrego un pote de helado, que el sistema me agregue un seleccionador para los gustos del mismo.

Lo estoy haciendo con Jquery.

Algo así, cada vez que sumo una unidad en el contador, realiza una función append para agregar en la div de variedades unos input checkbox, (lo que hago es tomar los checkbox que había con .html() y los agrego al div con .append() ), eso funciona bien el problema es que me asigna automáticamente los mismos id que ya tenían los input anteriores, necesito que me cambie los id de los input ( seria ideal que solo le cambie un numero al final ).

Dejo mi código para que se den una mejor idea:

function sumarVariedad(DIV)
        {
            var PRODUCTO = "#variedadesProducto" + DIV;
            
            var variedad = $(PRODUCTO).html();
            
            $(PRODUCTO).append(variedad);
        }

Lo que quiero hacer es que me agregue cada vez que ejecuto la función: , Donde X vaya cambiando el valor.

Añado fragmentos de código para que se entienda:

<div id="variedadesProducto1">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                                <label class="form-check-label" for="inlineCheckbox1">1</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                                <label class="form-check-label" for="inlineCheckbox2">2</label>
                            </div>
                        </div>

Lo que deseo es que cada vez que se ejecute la función, se agregue dentro de la div '#variedadesProducto1' la misma cantidad de input que ya tiene dentro pero con distintos id (inlineCheckbox3 y inlineCheckbox4) por ej.

0

1 respuesta 1

0

el problema es que me asigna automáticamente los mismos id

No es automático, la manera en la que estás generando el elemento para agregar con append es haciendo referencia a uno que ya existe, y por lo tanto, siempre vas a copiar su id.

¿Lo que necesitas entonces es cambiar el id del elemento que creas?

Segun lo que logro entender quieres algo cómo así (asumiendo que DIV es tu contador (? No logré entender esta parte)):

function sumarVariedad(DIV)
        {
            var PRODUCTO = "#variedadesProducto" + DIV;
            
            var variedad = $(PRODUCTO).html();
            
            variedad.id = "variedadesProducto"+(DIV+1);
            
            $(PRODUCTO).append(variedad);
        }

UPDATE:

Perdón por la tardanza, he estado un poco ocupado, aquí te dejo una solución, no es la más eficiente porque la hice de una manera muy rápida, sin embargo, te comenté todo para explicar lo que podrías hacer... A lo que te entiendo esto es lo que andas buscando:

function sumarVariedad(numProducto) {
  
  //Obtenemos el eleemnto padre
  let producto = $("#variedadesProducto" + numProducto);
  
  //Obtenemos sus hijos
  let checks = Array.from(producto.children());

  //Iteramos sobre sus hijos
  checks.forEach( (check,index) => {
    
    //Como las cuentas inician en 1 y no en 0 (no existe por ejemplo #inlineCheckbox0)
    index++;
    
    //Nuevo indice para cada elemento
    let newIndex =  checks.length + index;
    
    //Obtenemos un nuevo objeto que contiene el check a partir de una clonación
    let newCheck = check.cloneNode(true);
    
    //Obtenemos el input y la label del clon para cambiarles los números
    let input = $(newCheck).find("input")[0];
    let label = $(newCheck).find("label")[0];
  
    //Editamos los atributos para que tengan los nuevos números
    label.setAttribute("for",label.getAttribute("for").replace(index,newIndex));
    label.innerHTML = label.innerHTML.replace(index,newIndex);
    input.value = input.value.replace(index,newIndex);
    input.id = input.id.replace(index,newIndex);
 
    //Agregamos el nuevo elemento al elemento padre
    producto.append(newCheck);
  })



}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="variedadesProducto1">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
    <label class="form-check-label" for="inlineCheckbox2">2</label>
  </div>
</div>
<button onclick="sumarVariedad(1)">Botón mágico</button>

3
  • Es un listadito de productos, desde el contador agrego un ítem nuevo al div, ese div tiene x cantidad de input (según cantidad de variedades que tenga el producto), lo que necesito hacer es que si el div tiene por ejemplo 2 input ( 1 y 2 ) al presionar el botón del contador me agregue al div de variedades 2 input mas que se llamen 2 y 4 Commented el 17 nov. 2020 a las 18:22
  • Creo que lo mejor seria que compartieras una mayor parte de tu código para entender mejor, porqué si bien me puedo hacer una idea de lo que estás describiendo, no tengo idea de como lo estás implementando y sobre qué elementos.
    – FranAcuna
    Commented el 17 nov. 2020 a las 18:36
  • Listo, ahi agregue Commented el 17 nov. 2020 a las 18:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.