javascript - traductor - tradusir en ingles

¿Es "loop" una palabra clave especial dentro de span?

Question

Tengo el siguiente HTML:

<span loopx=''{"operator":"maxis"}''>hello</span>

Si quiero recuperar su valor de atributo {"operator":"maxis"} , simplemente puedo usar

$(''span[loopx]'').each(function(index) {
    var attr = $(this).attr(''loopx'');
    // attr is the string "{"operator":"maxis"}"
});

Sin embargo, para el siguiente HTML

<span loop=''{"operator":"maxis"}''>world</span>

Obtengo el siguiente resultado:

$(''span[loop]'').each(function(index) {
    var attr = $(this).attr(''loop'');
    // attr is the string "loop"
});

Me preguntaba, si el loop es una palabra clave especial dentro del lapso?

Aquí está el código de prueba: http://jsfiddle.net/yccheok/ghggtrfq/4/

Answer 1

Creo que es un error de jQuery, con vainilla Js funciona sin problemas

var span = document.getElementsByTagName( ''span'' );
for ( var i = 0, len = span.length; i < len; i++ ) {
  var out = document.querySelector( ''#out''+ (i+1) );
  out.innerHTML = span[i].getAttribute( ''loopx'' ) + span[i].getAttribute( ''loop'' );
}

<pre id="out1"></pre>
<pre id="out2"></pre>

<span loopx=''{"operator":"maxis"}''>hello</span>
<span loop=''{"operator":"maxis"}''>world</span>

Answer 2

No hay ningún atributo de loop en los elementos de span : solo atributos globales.

Sin embargo, hay un atributo de loop en audio elementos de audio y video .

Para los atributos personalizados, debe usar data atributos de data definidos en HTML5.

Si nombra su atributo data-loop , puede acceder de forma nativa a través de element.dataset.loop .

Answer 3

Según las especificaciones, el loop es un atributo booleano , lo que significa que debe especificarlo de una de las siguientes formas **:

<span loop>
<span loop="">
<span loop="loop">

Cualquier otro valor como loop="false" o loop="0" o loop=''{"operator":"maxis"}'' simplemente implica que el atributo loop está presente y que el audio / video se reproducirá.

Ahora, para los atributos booleanos, jQuery.attr simplemente devuelve el nombre del atributo. Este comportamiento está documentado y no es un error :

Con respecto a los atributos booleanos, considere un elemento DOM definido por el marcado HTML <input type="checkbox" checked="checked" /> , y suponga que está en una variable de JavaScript llamada elem :

$( elem ).attr( "checked" ) (1.6.1+) (devuelve) "checked" (Cadena) Cambiará con el estado de la casilla de verificación

Habiendo explicado eso, la solución correcta es usar los atributos de datos HTML5. jQuery analiza los atributos de datos en la carga de la página para que pueda hacer esto:

$(function() {
  var $span = $("span[data-loop]").first();
  console.log($span.data("loop")); // Object {operator: "maxis"}
  console.log($span.data("loop").operator); // maxis
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span data-loop=''{"operator":"maxis"}''>world</span>

^{** Tenga en cuenta que este atributo no es válido en los elementos span .}

Answer 4

bucle es un atributo utilizado en las etiquetas de medios html5 que espera un valor booleano verdadero o falso. Espero que esta sea la razón por la que lo anterior no funciona.