0

Buenas estoy haciendo un configurador, para que vayan seleccionando opciones y se sumen esas opciones a un listado de cosas seleccionadas (una especie de carrito).

Bien pues estoy haciendo una parte que por ejemplo eligen entre uno o otro:

Tipo de contenedor:
Contenedor 20 pies:
Contenedor 40 pies:

Ahora mismo puedo añadir las dos cosas a una lista final donde muestra lo que has comprado por decirlo de una forma. Pero la cuestión es que si elijo el primero y luego cambio al segundo, el primero se quite y se ponga el segundo.

El JavaScript

var total = 0;

function pintaContenedor( elemento ){

    var miListaDeConceptos = [
    { "concepto": "Contenedor 20 pies", "precio": 20000, "Alturas": "1 Altura" },
    { "concepto": "Contenedor 40 pies", "precio": 30000, "Alturas": "2 Alturas"},
    ];


    var elemento = miListaDeConceptos[ elemento ];
    document.getElementById('nadaSeleccionado').style.display='none';


    $( "#ContenedorElegido" ).append(
    '<div id="div_0" class="col-12 listado" data-precio="'+elemento.precio+'">'+elemento.concepto+'<span class="pull-right">'+elemento.precio+',00 €</span><button onclick="borra20pies(this);" class="bt-comp"><i class="fa fa-times"></i></button><div>Alturas:<span class="pull-right">'+elemento.Alturas+'</span></div></div>' );

      total += elemento.precio;


    $("#htmlTotal").html('<div id="div_total" class="col-md-12"><span class="palab-total">TOTAL: </span><span class="palab-total2">'+total+',00 €*</span><div></div></div>');

  }

HTML:

    <div class="form-check">
      <input class="form-check-input" type="radio" name="contenedor[]" id="contenedor" onchange="pintaContenedor(0);">
      <label class="form-check-label" for="contenedor">
        20 pies
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="contenedor[]" id="contenedor" onchange="pintaContenedor(1);">
      <label class="form-check-label" for="contenedor">
         40 pies
      </label>
     </div>

Aquí según al botón que apreto me añade el 0 o el 1 de la variable. Pero la idea es que si apreto el 1 me muestre el 1, pero si apreto el 2 el 1 se quite de la lista y se ponga el 2. Vamos que si puedes cambiar entre uno y otro, pero solo puedes seleccionar uno.

Ahora Muestro un div si no hay producto seleccionado

  <div id="nadaSeleccionado" class=""style="padding: 19px;">
     <i class="fa fa-exclamation-triangle" aria-hidden="true" style="padding-right: 5px;"></i>Aun no a ningún extra
  </div>

Y otro distinto, si hay productos seleccionados

  <div id="ContenedorElegido" class=""></div>

Y el div donde muestro el total

  <div id="htmlTotal"></div>

1 respuesta 1

0

Por lo que entiendo debes quitar uno y dejar el otro, basta con reemplazar todo el contenido del div (ContenedorElegido) esto se puede hacer con el metodo.html() de jquery, también en vez de acumular los valores en la variable total haces algo como esto total=elemento.precio y agregas el div del nuevo elegido. Coloco el codigo para más claridad:

var total = 0;
var miListaDeConceptos = [
{ "concepto": "Contenedor 20 pies", "precio": 20000, "Alturas": "1 Altura" },
{ "concepto": "Contenedor 40 pies", "precio": 30000, "Alturas": "2 Alturas"},
{ "concepto": "Contenedor 60 pies", "precio": 60000, "Alturas": "3 Alturas"}
];

function pintaContenedor(el){      
  document.getElementById('nadaSeleccionado').style.display='none'; 
  var elemento = miListaDeConceptos[ el ];
  total=0+ elemento.precio;

  $( "#ContenedorElegido" ).html('<div> class="col-12 listado" data-id="" 
   data-precio="'+elemento.precio+'">'+elemento.concepto+'<span class="pull- 
   right">'+elemento.precio+',00 €</span><button onclick="borra20pies(this);" 
    class="bt-comp"><i class="fa fa-times"></i></button><div>Alturas:<span 
    class="pull-right">'+elemento.Alturas+'</span></div></div>' );      
 }

Tal vez pueda ayudarte este código es más dinámico para el caso que expones, agregando y eliminando elementos del listado verificando si está seleccionado o no :

var total = 0;
var miListaDeConceptos = [
    { "concepto": "Contenedor 20 pies", "precio": 20000, "Alturas": "1 Altura" },
    { "concepto": "Contenedor 40 pies", "precio": 30000, "Alturas": "2 Alturas"},
    { "concepto": "Contenedor 60 pies", "precio": 60000, "Alturas": "3 Alturas"}
    ];

 

function pintaContenedor(x, el ){
    
    document.getElementById('nadaSeleccionado').style.display='none';  
    //Valido si esta activado o no 
    let ternariaVal=($(x).is(':checked')?functionPoner(x,el):functionQuitar(x,el));   
    
      
  }
  function functionQuitar(x,el){
     
    var elemento = miListaDeConceptos[ el ];        
    let elegido='#'+el;    
    total=total- elemento.precio;
    $( elegido).remove();   
    mostrarTotal();
  }
  function functionPoner(x,el){
    var elemento = miListaDeConceptos[ el ];
    $( "#ContenedorElegido" ).append('<div id="'+el+'" class="col-12 listado" data-id="" data-precio="'+elemento.precio+'">'+elemento.concepto+'<span class="pull-right">'+elemento.precio+',00 €</span><button onclick="borra20pies(this);" class="bt-comp"><i class="fa fa-times"></i></button><div>Alturas:<span class="pull-right">'+elemento.Alturas+'</span></div></div>' );
    total += elemento.precio;    
    mostrarTotal();
  }
  function mostrarTotal(){
    $("#htmlTotal").html('<div id="div_total" class="col-md-12"><span class="palab-total">TOTAL: </span><span class="palab-total2">'+total+',00 €*</span><div></div></div>');
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


 
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="contenedor=[]" id="contenedor" onchange="pintaContenedor(this,0);">
        <label class="form-check-label" for="contenedor">
            20 pies
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="contenedor=[]" id="contenedor" onchange="pintaContenedor(this,1);">
        <label class="form-check-label" for="contenedor">
            40 pies
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="contenedor=[]" id="contenedor" onchange="pintaContenedor(this,2);">
        <label class="form-check-label" for="contenedor">
            60 pies
        </label>
    </div>

    <div id="nadaSeleccionado" class=""style="padding: 19px;">
        <i class="fa fa-exclamation-triangle" aria-hidden="true" style="padding-right: 5px;"></i>Aun no a ningún extra
     </div>

     <div id="ContenedorElegido" class=""></div>

     <div id="htmlTotal"></div>

Suerte!!

3
  • Hola muchas gracias por tu respuesta, he intentado el código que comentas que sera dinámico, pero pasa lo mismo que me pasaba, tiene que ir cambiando que contenedor selecciono, no que pueda seleccionar los 3 @demepty probe el primero me da error el código. Un saludo
    – Miguel
    Commented el 2 may. 2020 a las 11:58
  • Muestra el error miguel
    – demepty
    Commented el 3 may. 2020 a las 3:09
  • el error puedes verlo en tu respuesta, la ejecutas y veras que puedes marcar los 3 @demepty
    – Miguel
    Commented el 4 may. 2020 a las 10:10

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.