Question

我正在尝试通过按钮单击显示文本数组中的元素。元素都是第一次正确显示，但是如果我再次点击按钮则没有任何反应。我试图从这里调整代码： changing text periodically in a span from an array with jquery

var terms = ["term 1", "term 2", "term 3"]; //array of terms to rotate

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

我的HTML是：

<form>
<input type="button" value="200 wpm" onclick="rotateTerm()" />
</form>
<p><span id="rotate"></span></p>

谢谢你的帮助

Answer 1

你的意思是“什么都没有发生”？会发生什么？我设置了一个小提琴，当你按下按钮时，术语开始正确显示并继续无限循环。会发生什么？

在这里摆弄：http://jsfiddle.net/nicolapeluchetti/KwTWZ/

编辑 - 如果您只想旋转一次然后再按一下按钮再旋转，则可以执行以下操作：

var terms = ["term 1", "term 2", "term 3"]; //array of terms to rotate

function rotateTerm() {
    var ct = $("#rotate").data("term") || 0;

    if (ct == 3) {
        $("#rotate").data("term", 0)
        return;
    }
    $("#rotate").data("term", ct == terms.length ? 0 : ct + 1).text(terms[ct]).fadeIn().delay(2000).fadeOut(200, rotateTerm);
}

拨弄; http://jsfiddle.net/nicolapeluchetti/KwTWZ/1/

在淡出循环文本数组中重新启动淡入淡出

1 个答案: