Ayuda en la programación, respuestas a preguntas / Javascript / Restar el número haciendo clic hasta que llegue a cero: javascript, jquery, css, clic, restar

Reste el número haciendo clic hasta que llegue a cero - javascript, jquery, css, clic, restar

Quiero el contenido de #rad-btn::before restar cada vez #rad-btn se empuja hasta que finalmente llega a cero (después de 12 empujes).

$(document).ready(function() {
$("#rad-btn").click(function() {});
});

#rad-btn::before {
content: "12";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="rad-btn" href="#">
<img src="/images/img/rad-btn2.png">
</a>

Alguien sabe como hacer esto?

Respuestas

1 para la respuesta № 1

Utilizar data-*, attr() a content para hacer referencia a la data-* atributo, Element.dataset

$(document).ready(function() {
$("#rad-btn").click(function(e) {
e.preventDefault();
if (this.dataset.btn > 0) {
this.dataset.btn = --(this.dataset.btn)
}
})
})

#rad-btn::before {
content: attr(data-btn);
}
#rad-btn {
width: 100px;
padding: 8px;
border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<a id="rad-btn" href="#" data-btn="12">
<img src="/images/" alt="image">
</a>

0 para la respuesta № 2

Puedes usar css attr() para establecer el contenido y luego ajustar el valor de ese atributo

$("#rad-btn").click(function(e) {
e.preventDefault();
$(this).attr("data-num", function(_, curr) {
return curr - 1 > 0 ? curr - 1 : 0;
});
});

#rad-btn::before {
content: attr(data-num);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="rad-btn" href="#" data-num="12"></a>

0 para la respuesta № 3

Si está buscando otro enfoque o no puede cambiar el marcado, puede usar:

counter-reset con un valor inicial de 12.
counter-increment con un valor negativo, para disminuir en 1 cada vez que se hace clic en el ancla.
counter() función css en el content propiedad del pseudo-elemento ::before para mostrar el número.

$(document).ready(function() {
(function() {
var x = -1;
$("#rad-btn").on("click.mycounter", function(e) {
e.preventDefault();
if (x === -12) {
$(this).off("click.mycounter");
}
$(this).css("counter-increment", "mycounter " + x);
x--;
});
})();
});

#rad-btn {
counter-reset: mycounter 12;
}
#rad-btn::before {
content: counter(mycounter);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="rad-btn" href="#">
<img src="/images/" alt="image">
</a>