Pourquoi l'attribut vide brise-t-il le script?

Question

C'est mon joli titre. J'ai donc essayé de manipuler avec le titre pour Scrollme.js. Et voici mon code de script qui l'a obtenu de here. J'ai un peu manipuler avec cela et:

$("[title*='aniscroll']").each(function() { 
 
    $(this).addClass("scrollme animateme"); 
 
    var title = this.title, 
 
    when = this.title.match(/when=(.*?)(\s|$)/), 
 
    from = this.title.match(/from=(.*?)(\s|$)/), 
 
    ... 
 
    crop = this.title.match(/crop=(.*?)(\s|$)/) 
 

 
    $(this).attr("data-when", when[1]); 
 
    $(this).attr("data-from", from[1]); 
 
    ... 
 
    $(this).attr("data-crop", crop[1]); 
 
});

<div class="test" title="aniscroll when=enter from=0.5 to=0 opacity=0 rotatex=90 translatex=-200">

Il ne fonctionne pas pour moi bien, parce que, après ce script je

<div class="test scrollme animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" style="opacity: 0.77; transform: translate3d(-45px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);"><!-- simple frame --></div>

Et ça n'anime que l'opacité et translatex mais où est mon rotatex. Et il y a une erreur dans la console:

Uncaught TypeError: Cannot read property '1' of null

Mais si je vais échanger de $ (this) .attr (» ... à:

//Манипуляции с data-attr 
 

 
$("[title*='aniscroll']").each(function() { 
 
    $(this).addClass("scrollme animateme"); 
 
    var title = this.title, 
 
    when = this.title.match(/when=(.*?)(\s|$)/), 
 
    from = this.title.match(/from=(.*?)(\s|$)/), 
 
    ... 
 
    crop = this.title.match(/crop=(.*?)(\s|$)/) 
 

 
    $(this).attr("data-when", when[1]); 
 
    $(this).attr("data-from", from[1]); 
 
... 
 
    $(this).attr("data-crop", crop[1]); 
 
});

Il travaillera parfaitement pour mon ce titre de test spécifique, mais si je vais changer le titre et ajouter "roatatez" à elle ne fonctionne pas.

So problem is in emplty attribute and I don't know how to fix it.

Peut-être qu'il faudra ajouter "if condition" pour fonctionner correctement. Peut-être que vous connaissez la solution à ce sujet? Merci pour vos futures réponses.

J'espère que vous avez compris ma question.

---

J'utiliser votre troisième scénario et obtenir

$("[title*='aniscroll']").each(function() { 
 
    
 
    var attrs = ["when", "from", "to", "opacity" "translatex", "translatey", "translatez", "rotatex", "rotatey", "rotatez", "scale", "scalex", "scaley", "scalez", "easing", "crop"]; 
 
    var title = this.title; 
 
    var $this = $(this); 
 
    attrs.forEach(function(attr) { 
 
     var value = title.match(new RegExp(attr + "=(.*?)(\\s|$)")); 
 
     if (value) { 
 
     $this.attr("data-" + attr, value[1]); 
 
     } 
 
}); 
 
\t 
 
    
 
});

Et je mistalke:

Uncaught SyntaxError: Unexpected string And nothing heppened with div

Answer 1

Oui, vous aurez envie de faire conditionnel selon que vous avez obtenu une correspondance d'un test donné.

Par exemple, pour le faire fonctionner avec when:

if (when) $(this).attr("data-when", when[1]); 

... qui ne sera pas ajouter le data-attr du tout s'il n'y avait pas un match, ou

$(this).attr("data-when", when ? when[1] : ""); 

. ... qui va l'ajouter avec une valeur vide quand il n'y avait pas de correspondance. Note secondaire: Lorsque vous avez des blocs massifs de code répétitif, c'est un signe que vous voulez refactoriser.:-) Par exemple, dans ce code, vous pouvez faire quelque chose comme ceci:

var attrs = ["when", "from", "to", "opacity"/*...*/]; 
var title = this.title; 
var $this = $(this); 
attrs.forEach(function(attr) { 
    var value = title.match(new RegExp(attr + "=(.*?)(\\s|$)")); 
    if (value) { 
     $this.attr("data-" + attr, value[1]); 
    } 
});