Question

我在jQuery中搜索了一个文本循环引擎，因为我不知道该怎么做。我在StackOverflow上找到了答案： changing text periodically in a span from an array with jquery

我发现有效的代码：

var terms = ["term 1", "term 2", "term 3","term 4","term 5","term 6","term 3"];

function rotateTerm2() {

  console.log($("#rotate").data("term"));  //debug 1

  var ct = $("#rotate").data("term") || 0;
  console.log(ct);
  $("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
      .delay(2000).fadeOut(400, rotateTerm2);
}
$(rotateTerm2);

这很好用，我可以在我的数组中添加新字符串并编辑动画时序。但是，我想使用参数将其编辑为函数，我可以将其放入A脚本中并在需要时导入它。我计划了4个参数：

要更改的元素
包含文本将更改为
延迟/显示停留的时间（简单的jquery .delay）
fadeOut speed。

现在我的代码看起来像这样：

var terms = ["term 1", "term 2", "term 3","term 4","term 5","term 6","term 3"];

function rotateTerm(changeE,Rterms,delay,fadeSpeed) {
  var element = "#" + changeE;

  console.log(element);          //debug 1
  var ct = $(element).data("term") || 0;


  console.log($(element).data("term"));  //debug 2
  console.log(ct);            //debug 3
  $(element).data("term", ct == Rterms.length -1 ? 0 : ct + 1).text(Rterms[ct]).fadeIn()
              .delay(delay).fadeOut(fadeSpeed, rotateTerm);
}
rotateTerm("rotate",terms,2000,400);

然而，这不起作用，我得到一个错误：

TypeError：Rterms未定义

这真让我困惑，因为我确信这只是传递值并使用值变量而不是值本身的小菜一碟。所以我尝试调试，如我的代码所示，我console.log'ged变量我得到错误和其他变量，并将它们与工作函数的console.logs进行比较，我发现函数后面出现错误第二次运行，控制台日志的输出如下：

rotate textRotate.html：44：5
  undefined textRotate.html:52：5
  0

然后，第二次就是这样：

undefined textRotate.html:44：5
  undefined textRotate.html:52：5
  0

并且第三次提出错误。

我注意到由于某些我不理解的奇怪原因，元素变为“#undefined”。我认为，因为数组（第二个参数）引发了类型错误，我查了一下我是否犯了错误，javascript需要一些特殊条件才能使用数组作为参数，但我认为它不会因为我没找到任何参考。我在我的数组的参数部分尝试了...运算符，但它也没有用。

现在我的问题，有什么办法可以转：

function rotateTerm2() {

  console.log($("#rotate").data("term"));  //debug 1

  var ct = $("#rotate").data("term") || 0;
  console.log(ct);
  $("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
             .delay(2000).fadeOut(400, rotateTerm2);
}
$(rotateTerm2);

到类似引擎的函数，包含元素的参数，包含元素更改的值的数组，延迟和动画速度？ 我真的很感激一些帮助，我是jQuery的新手，我不明白我的数组和我的元素突然未定义的原因。

Answer 1

您的fadeout没有使用带有相同参数的rotateTerm调用，因此rTerms为undefined

  .fadeOut(fadeout, function(){
    rotateTerm( $element, terms, delay, fadeout )
  });

<强>演示

var terms = ["term 1", "term 2", "term 3"];

function rotateTerm( $element, terms, delay, fadeout ) 
{
  var ct = $element.data("term") || 0;
  $element.data("term", ct == terms.length - 1 ? 0 : ct + 1).text(terms[ct]).fadeIn().delay(delay)
  
  .fadeOut(fadeout, function(){
    rotateTerm( $element, terms, delay, fadeout )
  });
}

rotateTerm( $("#rotate"), terms, 2000, 200);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Here is a sentence <span id="rotate">this</span> is what changes</p>

jQuery文本循环函数不使用参数

1 个答案: