Select / Deselect items

Question

Select / Deselect items

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I am trying to implement an option to select / deselect a drawing (each drawing would be a product). And I got it from the start, I can do it one by one, or through a button that selects or deselects everything.

The problem is that when I clicked one and then clicked another many times I have to click a few times on it to produce the action I want (select / deselect according to its current state). That is clear to me that it is because I do not have the correct code that I should.

How would it be solved?

$(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;
    }

  });

});

jquery

asked by NEA 04.09.2017 в 13:44

source

2 answers

0

I think it's because the initialization of the variables are within the function, try to define them as global to see if that way works on the first 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;
    }

  });

});

answered by 04.09.2017 в 14:35

Passing values between JS files Show Name Java Jframe

score 1 · Accepted Answer

I give you a slightly different example of what you have but it works in a simpler way:

// 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>