0

tengo un JSON que contiene información de productos.(el JSON contiene una MARCA, dentro de esa MARCA, MODELOS, y dentro de MODELOS, los PRECIOS.

recorro ese JSON de los productos y muestro las MARCAS, y cuando hago click en una MARCA, recorro los MODELOS de esa MARCA.

$.each(json.categorias, function (i, marca) {
    $.each(marca.opciones, function (i, disable) {
        // console.log(disable);
        if (disable == "false") {
            marcasHTML += '<div id="' + marca['nombre_categoria'] + '" data-marca="' + marca['nombre_categoria'] + '">';
            marcasHTML += '<img src="' + ruta + marca['nombre_categoria'] + '.png" class="img-responsive" alt="' +
                marca['nombre_categoria'] + '" title="' + marca['nombre_categoria'] + '">';
            marcasHTML += '</div>';
        }
    });
});
$('body').on('click', '[data-marca], #modelo', function () {
    $.each(modelos.categorias, function (i, items) {
        if (items.nombre_categoria == jsonMostrar.marca) {
            $.each(items.contenidos, function (j, modelo) {
                modelosHTML += '<div data-modelo="' + modelo.titulo_contenido + '">' +
                    '<span>' + modelo.titulo_contenido + '</span>' +
                    '</div>';
            })
        }
    });
    $('#modelos-opciones').html(modelosHTML);
});

el problema viene ahora, cuando creo los últimos divs de PRECIOS, quiero que cuando haga click en él, se añada una clase 'ACTIVE', pero no la añade.

$('body').on('click', '[data-modelo]', function () {
    $.each(precios.categorias, function (i, items) {
        $.each(items.contenidos, function (j, modelo) {
            if (modelo.titulo_contenido == jsonMostrar.modelo) {
                $.each(modelo.contenido, function (k, precio) {
                    preciosHTML += '<div class="precio-opcion" id="' + k + '" data-precioopcion="' + k + '">';
                    preciosHTML += '<span>' + precio.name + '</span>' +
                        '<span class="precio">' + precio.value + '</span>';
                    preciosHTML += '</div>';
                })
            }
        });
    });
    $('#reparaciones-opciones').html(preciosHTML);
});

$('body').on('click', '.precio-opcion', function () {
    jsonMostrar.opcion = $(this).data("precioopcion");
    $('#' + jsonMostrar.opcion).addClass('active');
    $.each(opciones.categorias, function (i, items) {
        $.each(items.contenidos, function (j, modelo) {
            if (modelo.titulo_contenido == jsonMostrar.modelo) {
                $.each(modelo.contenido, function (name, precio) {
                    if (name == jsonMostrar.opcion) {
                        $('#marca-seleccionada').val(jsonMostrar.marca);
                        $('#modelo-seleccionado').val(jsonMostrar.modelo);
                        $('#precio-seleccionado').val(precio.name + ' - ' + precio.value);
                    }
                })
            }
        });
    });
    $('#reparaciones-opciones').html(preciosHTML);
});

si hago console logs después de añadir la clase, me devuelve el div con la clase añadida, pero en el HTML no la añade.

3
  • 1
    Hola. Pon un pequeño ejemplo de lo que hay en modelo.contenido para poder reproducir el problema y dinos lo que significa no funciona: qué hace el código, qué esperas que haga, si hay errores, qué errores, etc. De paso te comento que estás implementando una pésima práctica: no deberías modificar elementos en bucles, cada vez que un elemento del DOM es modificado hay un precio a pagar, por lo que es mejor concatenar todo en una sola variable y hacer una sola modificación del DOM, fuera del bucle.
    – A. Cedano
    el 6 ago. 2020 a las 15:25
  • he explicado mejor la situación y con mas código.
    – manu perez
    el 6 ago. 2020 a las 17:14
  • @manuperez: Nos podrías compartir como luce tu JSON? No importa que utilices datos dummy, lo que importa es que podamos ver la estructura del mismo.
    – Sagnalrac
    el 29 ago. 2020 a las 18:12

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.