Pomoc w programowaniu, odpowiedzi na pytania / JavaScript / Odejmuj liczbę po kliknięciu, aż osiągnie zero - javascript, jquery, css, kliknij, odejmij

Odejmij liczbę, klikając, aż osiągnie zero - javascript, jquery, css, kliknij, odejmij

Chcę zawartości #rad-btn::before odejmować za każdym razem #rad-btn jest popychany, aż w końcu osiągnie zero (po 12-krotnym naciśnięciu).

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

Ktoś wie, jak to zrobić?

Odpowiedzi:

1 dla odpowiedzi № 1

Posługiwać się data-*, attr() w content odwołać się do data-* atrybut, 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 dla odpowiedzi nr 2

Możesz użyć css attr() aby ustawić zawartość, a następnie dostosuj wartość tego atrybutu

$("#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 dla odpowiedzi № 3

Jeśli szukasz innego podejścia lub nie możesz zmienić znaczników, możesz użyć:

counter-reset z wartością początkową 12.
counter-increment z wartością ujemną, aby zmniejszyć o 1 za każdym razem, gdy zostanie kliknięta kotwica.
counter() css w content właściwość pseudoelementu ::before aby wyświetlić numer.

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