0

Estoy intentando implementar una opción para seleccionar/deseleccionar un dibujo (cada dibujo sería un producto). Y de entrada lo he conseguido, lo puedo hacer uno a uno, o mediante un botón que selecciona o deselecciona todo.

El problema es que cuando he clicado uno y luego clico otro muchas veces he de clicar un par de veces encima para que se produzca la acción que deseo (seleccionar/deseleccionar según su estado actual). Eso tengo claro que es por no tener el código todo lo correcto que debería.

¿Como se solucionaría?

$(document).ready(function() {

  // Seleccionar/Deseleccionar de manera individual
  Marca_Individual_Seleccionada = false;

  //Recibe el evento de que se ha clicado Logo_Marca
  $(".Logo_Marca").click(function() {

    if (Marca_Individual_Seleccionada == true) {

      $(this).removeClass("Marca_Seleccionada");
      Marca_Individual_Seleccionada = false;

    } else {

      $(this).addClass("Marca_Seleccionada");
      Marca_Individual_Seleccionada = true;

    }

  });

  // Seleccionar/Deseleccionar TODO a la vez
  Seleccionar_Todo = false;

  $("#Boton_Marca_Seleccionar_Todo").click(function() {
    if (Seleccionar_Todo == false) {
      $(".Logo_Marca").addClass("Marca_Seleccionada")
      Seleccionar_Todo = true;
    } else {
      $(".Logo_Marca").removeClass("Marca_Seleccionada")
      Seleccionar_Todo = false;
    }

  });

});

3
  • Hola Carlos, ¿al seleccionar de forma individual permites también la selección múltiple o solo deseas seleccionar uno o todos pero no dos por ejemplo?
    – Edu3D
    Commented el 4 sept. 2017 a las 12:45
  • Hola @Edu3D no termino de entender muy bien tu pregunta. Yo permito que no haya nada seleccionado, todo, uno, dos o los que el usuario quisiera. Es más, podría empezar de manera individual y luego pensar que quiere todos y entonces apretar el botón, o cualquier combinación que se te ocurra. Gracias y un saludo.
    – Lleims
    Commented el 4 sept. 2017 a las 13:26
  • te acabo de enviar un ejemplo simple de como seleccionar y deseleccionar con el toggleClass. Pruebalo en tu código y nos dice. PD: Lo he puesto en un ejemplo para mostrarlo en el fiddle.
    – Edu3D
    Commented el 4 sept. 2017 a las 14:02

2 respuestas 2

1

Te doy un ejemplo un poco diferente de lo que tienes pero funciona de forma más simple:

// Seleccionar/Deseleccionar TODO a la vez
Seleccionar_Todo = false;

$(document).ready(function() {


  $(".objetos").on('click', function() {
    $(this).toggleClass("seleccionados");
    if ($('.objetos').length == $('.seleccionados').length) {
      Seleccionar_Todo = true;
    } else {
      Seleccionar_Todo = false;
    }
  });


  $("#Boton_Marca_Seleccionar_Todo").click(function() {
    if (Seleccionar_Todo == false) {
      $(".objetos").addClass("seleccionados");
      Seleccionar_Todo = true;
    } else {
      $(".objetos").removeClass("seleccionados");
      Seleccionar_Todo = false;
    }
  });

});
.lista {
  display: block;
  padding: 1cm;
}

.objetos {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 3px solid #555;
  background: #428bca;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.seleccionados {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="lista">
  <div class="objetos">

  </div>
  <div class="objetos">

  </div>
  <div class="objetos">

  </div>
  <div class="objetos seleccionados">

  </div>
</div>
<button id="Boton_Marca_Seleccionar_Todo">
SELECCIONAR TODO
</button>

1
  • Wow, lo he puesto poniendo mi clases y va perfecto. Ya se que no se ha de usar esto para dar simplemente las gracias, pero muchas gracias, me has dado un enfoque muy diferente al mío.
    – Lleims
    Commented el 4 sept. 2017 a las 18:11
0

Creo que es por que la inicializacion de las variables se encuentran dentro de la funcion, prueba a definirlas como globales a ver si de esa forma funciona al primer click.

  // Seleccionar/Deseleccionar de manera individual
  Marca_Individual_Seleccionada = false;

  // Seleccionar/Deseleccionar TODO a la vez
  Seleccionar_Todo = false;

$(document).ready(function() {

  //Recibe el evento de que se ha clicado Logo_Marca
  $(".Logo_Marca").click(function() {

    if (Marca_Individual_Seleccionada == true) {

      $(this).removeClass("Marca_Seleccionada");
      Marca_Individual_Seleccionada = false;

    } else {

      $(this).addClass("Marca_Seleccionada");
      Marca_Individual_Seleccionada = true;

    }

  });


  $("#Boton_Marca_Seleccionar_Todo").click(function() {
    if (Seleccionar_Todo == false) {
      $(".Logo_Marca").addClass("Marca_Seleccionada")
      Seleccionar_Todo = true;
    } else {
      $(".Logo_Marca").removeClass("Marca_Seleccionada")
      Seleccionar_Todo = false;
    }

  });

});
1
  • Eso ya lo he probado y no cambia en nada el resultado aparentemente. :(
    – Lleims
    Commented el 4 sept. 2017 a las 13:28

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.