Skip to main content
cuerpo editado
Origen Enlace
Fran Islas
  • 2.4k
  • 1
  • 9
  • 21

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 <5<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!

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 <5) {
      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!

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!

Origen Enlace
Fran Islas
  • 2.4k
  • 1
  • 9
  • 21

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 <5) {
      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!