In this way I create a dynamic content of which I create an object that will help me to add their properties and visually show this amount.
var listado_ofertas_adicionales = $('.listado_ofertas_adicionales');
valCarrito = response.data;
$.each(valCarrito, function (i) {
/*Este es el objeto creado, segun los valores que vengan*/ objeto_Ofertas[valCarrito[i].Codigo_Inventario] = valCarrito[i].Cantidad
$('<li/>').addClass('swipeout')
.append($('<div/>').addClass('swipeout-content item-content')
.append($('<div/>').addClass('item-media')
.append('<img src="' + valCarrito[i].Url + '" onerror="this.onerror=null;" alt="" width="40" height="60" />'))
.append($('<div/>').addClass('item-inner')
.append($('<div/>').addClass('item-title-row')
.append($('<div style="font-size: 12px;"/>').addClass('item-title').append(valCarrito[i].Codigo_Inventario + " - " + valCarrito[i].Descripcion))
.append('<div class="codInventario" style="display:none">' + valCarrito[i].Codigo_Inventario + '</div>')
.append('<div class="tipo" style="display:none">' + valCarrito[i].Tipo + '</div>')
.append('<div class="tipo_costo" style="display:none">' + valCarrito[i].TipoCosto + '</div>')
.append('<div class="precioSocio" style="display:none">' + valCarrito[i].PrecioSocio + '</div>')
.append('<div class="volumenNegocio" style="display:none">' + valCarrito[i].VolumenNegocio + '</div>')
.append('<div class="item-after" data-unit-price="' + valCarrito[i].PrecioSocio + '"><span class="product-amount" style="font-size: 12px;">' + valCarrito[i].PrecioSocio + '</span></div>'))
.append($('<div/>').addClass('item-text')
/*.append('<input type="number" class="add_ofertas_adicionales" value="' + valCarrito[i].Cantidad + '" min="0" placeholder="Ingrese cantidad">')*/
.append($('<div/>').addClass('chip chip-small').append('<div class="chip-label"><span class="product-quantity">' + valCarrito[i].Cantidad + '</span></div>'))
.append($('<div style="background: rgba(0, 0, 0, 0);"/>').addClass('chip chip-small').append('<div class="chip-label"><button class="sumarOferta">+</button></div>'))
.append($('<div style="background: rgba(0, 0, 0, 0);"/>').addClass('chip chip-small').append('<div class="chip-label"><button class="restarOferta">-</button></div>')))))
.appendTo(listado_ofertas_adicionales);
});
console.log(objeto_Ofertas);
The result of the object looks like this:
{28759: 1,
31946: 0,
31947: 0,
31949: 0,
31950: 0,
31951: 0,
32340: 0,
32445: 0,
32448: 0,
32449: 0,
32450: 0,
33259: 1,
33261: 0}
and in this function I must add each property of the object 1 in 1, for example the property 28759 = 1, after pressing the button should be increasing.
var acrescimo = 0;
var el_product_quantity;
$('.listado_ofertas_adicionales').on('click','.sumarOferta',function(e){
myApp.showIndicator();
var el = $(this).closest('.swipeout');
el_product_quantity = el.find('.product-quantity');
var tipo = el.find('.tipo').text();
var codigoinventario = el.find('.codInventario').text();
var cantidad = acrescimo+1;
var tipocosto = el.find('.tipo_costo').text();
var preciosocio = el.find('.precioSocio').text();
var volumennegocio = el.find('.volumenNegocio').text();
addProductoOferta(idPedido,tipo,codigoinventario,cantidad,tipocosto,preciosocio,volumennegocio);
//acrescimo = 0;
console.log(objeto_Ofertas);
cantidad = acrescimo++;
el_product_quantity.text(cantidad);
});
The purpose is to increase and see the result: