Question

我一直试图让这个打字机功能运行（请参考下面的JSFiddle）。

我设置了一个if-else语句，以便当用户点击“传记”时，传记文本处于活动状态并自行输出，并在第二次单击时，文本变为非活动状态并被删除。理想情况下，第三次点击，传记文本将再次出现，不幸的是，这是我的代码崩溃的时候。它只运行一次，文本不再显示。

我尝试了console.logs并且知道当#bio有类＆＃34;活动＆＃34;时，DOM正在注册附在它上面，当它没有，所以我不确定为什么打字机脚本第二次没有工作。

＆＃13;

var str = "<p>This is biography text.</p>",
    i = 0,
    isTag, text;


$('#biog').click(function () {

    if ($("#bio").hasClass("active")) {
        $("#bio").removeClass("active");
        $("#bio").detach();
    } else {
        $("#bio").addClass("active");
        (function type() {
            text = str.slice(0, ++i);
            if (text === str) return;
            document.getElementById('bio').innerHTML = text;
            var char = text.slice(-1);
            if (char === '<') isTag = true;
            if (char === '>') isTag = false;
            if (isTag) return type();
            setTimeout(type, 1);
        }());
    }
});

＆＃13;

.active {
}

＆＃13;

<div id="biog"><a>Biography</a>
</div>
<div id="bio"></div>

＆＃13;

JSFiddle：http://jsfiddle.net/droogist/20L8088r/1/

Answer 1

你的代码有两个错误。

您在一次使用后分离元素，因为第二次尝试访问它时，它就不存在了。
一次使用后，您没有重置变量i。

因此，请使用$("#bio").html('');代替$("#bio").detach();

另外，在代码的其他部分添加i = 0;。

这是更新后的JSFiddle， http://jsfiddle.net/20L8088r/2/

打字机脚本在运行一次后停止运行

1 个答案: