0

Mi problema es que tengo una variable a la cual necesito incrementar su valor con cada click, pero en mi código, esta no incrementa sino permanece con el mismo valor... Llego a la conclusión de que lo reconoce como un solo evento por lo que no actualiza el valor de la variable, mas sin embargo ya intente con e.stopPropagation() y otros métodos. A continuación intentare reproducir el error:

$(".zoomContainner button").click(function(e) {
    e.stopPropagation();
    var action = $(this).attr("class");
    var zoomSelectorCount = 0;
    var zoomSelector = {

        0: 0,
        1: 25,
        2: 50,
        3: 75,
        4: 100

    }

    if (action == "zoomIn") {
      zoomSelectorCount++;
      console.log(zoomSelectorCount);
    }else if (action == "zoomOut") {
      zoomSelectorCount--;
      console.log(zoomSelectorCount);
    }
  });
* {

  margin: 0;
  padding: 0;

}

body {

  height: 300px;

}
.zoomContainner {

  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

}

.zoomTool {

  background-color: #212121c2!important;
  padding: 2px;
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;

}

.zoomTool button {

  background-color: transparent;
  outline: none;
  border: none;
  height: 40px;
  width: 40px;
  border-radius: 2px;
  transition: .2s;
  cursor: pointer;

}

.zoomTool button:hover {

  background-color: rgba(209, 209, 209, 0.53);

}

.zoomTool button i {

  color: white;
  font-size: 20px;

}

.zoomReset {

  margin: 0 1px;

}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="zoomContainner">
          <div class="zoomTool">
            <button class="zoomOut" type="button" name="button"><i class="fas fa-minus"></i></button>
            <button class="zoomReset" type="button" name="button"><i class="fas fa-search-minus"></i></button>
            <button class="zoomIn" type="button" name="button"><i class="fas fa-plus"></i></button>
          </div>
        </div>

Me encuentro que al ejecutar el código, cuando disminuyo el valor de la variable esta resulta en -1 y cuando la incremento retorna 1.

¿Hay otra lógica que pueda seguir para llegar al resultado deseado? Gracias.

1 respuesta 1

4

El problema es que estas declarando el contador dentro del evento. Entonces siempre lo reinicia. Te agregue una validación para que no desborde el contador.

 var zoomSelectorCount = 0;
$(".zoomContainner button").click(function(e) {

    var action = $(this).attr("class");
   
    var zoomSelector = {

        0: 0,
        1: 25,
        2: 50,
        3: 75,
        4: 100

    }

    if (action == "zoomIn" && zoomSelectorCount <4) {
      zoomSelectorCount++;
      console.log(zoomSelectorCount);
    }else if (action == "zoomOut" && zoomSelectorCount > 0) {
      zoomSelectorCount--;
      console.log(zoomSelectorCount);
    }
  });
.zoomTool {

  background-color: #212121c2!important;
  padding: 2px;
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;

}

.zoomTool button {

  background-color: transparent;
  outline: none;
  border: none;
  height: 40px;
  width: 40px;
  border-radius: 2px;
  transition: .2s;
  cursor: pointer;

}

.zoomTool button:hover {

  background-color: rgba(209, 209, 209, 0.53);

}

.zoomTool button i {

  color: white;
  font-size: 20px;

}

.zoomReset {

  margin: 0 1px;

}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="zoomContainner">
          <div class="zoomTool">
            <button class="zoomOut" type="button" name="button"><i class="fas fa-minus"></i></button>
            <button class="zoomReset" type="button" name="button"><i class="fas fa-search-minus"></i></button>
            <button class="zoomIn" type="button" name="button"><i class="fas fa-plus"></i></button>
          </div>
        </div>

Espero que sea lo que necesitabas. Saludos!

3
  • Oye muy buena!!! No se como se me paso y gracias por la validación! Commented el 19 oct. 2018 a las 2:30
  • De nada! Saludos.
    – Fran Islas
    Commented el 19 oct. 2018 a las 2:31
  • gracias crack , estaba busando la forma y no daba con la solcucion y no pense en que al dar cada click en el vento se reinicia todo Commented el 3 may. 2022 a las 21:25

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.