0

Segue código:

JS:

$("#id_notification_count").data("count", 10);

Html:

<a class="dropdown-toggle">
    <i id="id_notification_count" data-count="3" class="glyphicon glyphicon-bell notification-icon"></i>
</a>

O código de JS deveria funcionar ... e aqui tenho um exemplo em jsfiddle aqui.

Porque a linha $("#id_notification_count").data("count", 10); não funciona ?

1 Resposta 1

2

Os data-custom são atributos especiais definidos pelo HTML5, mas como qual quer elemento eles podem armazenar apenas strings.

Por um outro lado, a coleção interna do jQuery, que é acessível pelo método .data() pode vir à armazenar qual quer tipo de dado, inclusive objetos complexos com referencia circular.

Então por comodidade, o jQuery optou por carregar os valores dos data-custom como valores iniciais da sua coleção interna, mas veja, até neste ponto temos algumas inconsistências.:

var valores = $(".valores");
console.log(valores.data("value"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="valores" type="hidden" data-value="A" />
<input class="valores" type="hidden" data-value="B" />
<input class="valores" type="hidden" data-value="C" />
<input class="valores" type="hidden" data-value="D" />

Então, o .data("value")deveria retornar "A" ou ["A", "B", "C", "D"]? Afinal você precisar lembrar que o jQuery é um wrapper para uma coleção de DOM, enquanto o data-custom está à apenas à um elemento DOM.

agora vamos à um caso com o uso de objeto com referencia circular.:

var valores = $(".valores");
console.log(valores.data("value"));

var objetoA = {};
var objetoB = {};
objetoA.Gemeo = objetoB;
objetoB.Gemeo = objetoA;

valores.data("value", objetoA);
console.log(objetoA);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="valores" type="hidden" data-value="A" />

Qual valor deveria ser exibido no data-value neste caso? uma string com a representação do objeto em JSON? isto poderia travar o Browser ;D

Por fim, a propriedade .data() é anterior à definição dos data-custom do HTML5, porém o jQuery evoluiu para fazer uso deles na sua implementação, até para que fosse possível criar plugins com inicialização automática configuráveis apartir dos atributos.

Em todo caso o JavaScript define à sua propria forma de acessar os data-custom, e esta permite a edição dos mesmos.

var valores = document.querySelectorAll(".valores");
[].forEach.call(valores, function (valor, indice) {
  var valorOld = valor.dataset.value;
  valor.dataset.value = valor.dataset.value.charCodeAt(0);
  var valorNew = valor.dataset.value;
  console.log(`O elemento #${valor.id} tinha o valor ${valorOld} e foi alterado para ${valorNew}`);
});
<input id="elemA" class="valores" type="hidden" data-value="A" />
<input id="elemB" class="valores" type="hidden" data-value="B" />
<input id="elemC" class="valores" type="hidden" data-value="C" />
<input id="elemD" class="valores" type="hidden" data-value="D" />

note, que ao utilizar a propriedade dataset o valor dos data-custom foram alterados.

1
  • Tobias Mesquita, muito boa a sua reposta . Nice ! 30/05/2017 às 0:36

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 .