Question

这是我可爱的头衔。所以我试图用Scrollme.js的标题进行操作。这里是我从here得到的脚本代码。我有一些操纵和：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

它只会激活不透明度和translatex，但是我的rotatex。控制台出错：

未捕获的TypeError：无法读取属性＆＃39; 1＆＃39;为null

但如果我要交换$（this）.attr（＆＃34; ...到：

＆＃13;

//Манипуляции с 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]);
});

＆＃13;

它可以完美地用于我的这个特定测试标题，但如果我要更改标题并添加"roatatez"，它就无法正常工作。

所以问题在于emplty属性，我不知道如何解决它。

也许它需要添加一些＆＃34;如果条件＆＃34;工作正常。也许你知道解决这个问题？感谢您将来的答案。

我希望你理解我的问题。

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

＆＃13;

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

＆＃13;

我有个错误：

Uncaught SyntaxError：意外的字符串没有任何事情与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]);
    }
});

为什么空属性中断脚本？

1 个答案: