打字机脚本停止运行后，运转一旦

Question

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

我建立了一个if-else语句，这样，当用户点击传记传记文是积极和类型本身出来，并在第二次点击，文本变得无效，将被删除。理想情况下，第三次点击后，传记文本将再次显示，不幸的是，这是我的代码崩溃时。它只运行一次，文本不再显示。

我试过console.logs，并且知道DOM正在注册，当#bio有类“活动”附加到它，当它不，所以我不知道为什么打字机脚本不工作的第二个时间周围。

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

.active { 
 
}

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

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

Answer 1

有你的代码两个错误。

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

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

而且也是，在你的代码的else部分添加i = 0;。

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