打字機腳本停止運行後，運轉一旦

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/