Tem alguma forma de ao clicar em algum elemento atualize o numero de uma tag
para um valor maior?
Ex: o valor da tag
padrão é 1
, sendo a tag n
, n="1"
ao clicar no elemento atualiza para n="2"
e assim consecutivamente.
Pode usar setAttribute
e incrementando o valor a cada clique com addEventListener
.
Coloquei um contador nos botões para ilustrar, mas se você visualizar pelo "inspecionar elemento" do navegador, verá que o atributo n
está sendo igualmente alterado.
var els = document.querySelectorAll("#tags button");
for(x=0; x < els.length; x++){
els[x].addEventListener("click", function(){
var soma = parseInt(this.getAttribute("n"))+1;
this.setAttribute("n",soma);
this.innerText = soma;
});
}
<div id="tags">
<button type="button" n="1">1</button>
<button type="button" n="1">1</button>
</div>
Se o seu objetivo é marcar apenas no browser, segue um exemplo. Mas como você indicou a tag PHP na pergunta... se você quiser persistir essa contagem no servidor, precisará preparar uma estrutura para armazenar essas informações.
$('document').ready(function(){
$('.tag').on('click', function(){
var contador = $(this).attr('n');
var total = ++contador;
$(this).find('span:first').text(total);
$(this).attr('n', total);
});
});
div{
background-color: #ccc;
display:block;
position:relative;
min-width: 30px;
float:left;
padding: 5px 5px 5px 5px;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tag" n="0"> tag (<span class="count">0</span>)</div>
<div class="tag" n="0"> outra tag (<span class="count">0</span>)</div>
Você pode utilizar um botão que ao clicar incrementa o valor do input ou qualquer outra tag. Segue um exemplo:
var botao = document.getElementById('botao');
botao.addEventListener("click", function() {
var input = document.getElementById("input");
var valor_atual = input.value;
valor_atual++;
input.value = valor_atual;
});