1

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.

3 Respostas 3

2

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>

1

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>

1
  • Valeu cara. A primeira forma que você colocou resolveu meu problema, pois era exatamente o que eu precisava para atualizar os campos de numeração para identificação dos itens sem ter conflito. Commented 4/01/2018 às 1:42
1

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;
  });

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .