为什么空属性会破坏脚本？

Question

这是我可爱的标题。所以我尝试用 Scrollme.js 的标题进行操作。这是我从获得的脚本代码。我对此有一些操作并且：

$("[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">

它不适合我，因为在那个脚本之后我有

<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>

它只对不透明度和翻译器进行动画处理，但我的旋转器。控制台出现错误：

Uncaught TypeError: Cannot read property '1' of null

但是如果我将 $(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]);
});

它非常适合我的这个特定测试标题，但如果我更改标题并向其中添加 "roatatez"，它就不起作用。

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

也许需要添加一些 "if condition" 才能正常工作。也许你知道解决方案？感谢您以后的回答。

希望你能理解我的问题。

所以我使用你的第三个脚本并得到它

$("[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]);
      }
});
  
  
});

我有误传：

Uncaught SyntaxError: Unexpected string And nothing heppened with div

Answer 1

是的，您需要根据您是否从任何给定测试中获得匹配项来使其成为有条件的。

例如，要使其与 when 一起使用：

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

...如果没有匹配，则根本不会添加 data-attr，或者

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

..当没有匹配时，它将添加一个空白值。

旁注：当您有大量重复代码块时，这就是您想要重构的迹象。 :-) 例如，在此代码中，您可以执行以下操作：

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

为什么空属性会破坏脚本？

why does empty attribute break script?

javascript

jquery

attributes

title

typeerror