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.