在同一页面上多次使用打字机

Question

我想在我的论坛上使用this code，但在同一页面上多次使用。问题是所有的打字机同时打开并显示第一个内容。我实在看不出如何解决它......

/** 
 
* http://pixelhunter.me/ 
 
* 
 
* text {String} - printing text 
 
* n {Number} - from what letter to start 
 
*/ 
 
function typeWriter(text, n) { 
 
    if (n < (text.length)) { 
 
    $('.test').html(text.substring(0, n+1)); 
 
    n++; 
 
    setTimeout(function() { 
 
     typeWriter(text, n) 
 
    }, 100); 
 
    } 
 
} 
 

 
$('.start').click(function(e) { 
 
    e.stopPropagation(); 
 
    
 
    var text = $('.test').data('text'); 
 
    
 
    typeWriter(text, 0); 
 
});

@import url(https://fonts.googleapis.com/css?family=Cutive+Mono); 
 

 
body { 
 
    font: 16px/20px 'Cutive Mono', serif; 
 
} 
 

 
a { 
 
    color: #222; 
 
} 
 

 
.wrap { 
 
    width: 500px; 
 
    margin: 30px auto; 
 
    text-align: center; 
 
} 
 

 
.test { 
 
    margin-top: 10px; 
 
    text-align: left; 
 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <a href="#" class="start">Click to print</a> 
 
    <div class="test" data-text="Augue ac adipiscing quis, arcu auctor! Elementum. Non vel vel augue odio et in et est, integer, porta sed parturient rhoncus habitasse! Et porttitor duis pulvinar pulvinar proin ac augue ac sagittis scelerisque, elementum integer eros. Sed, nec! Porta, dapibus in quis elementum penatibus adipiscing, nec adipiscing adipiscing purus lacus odio dolor diam a, elementum etiam? Placerat, etiam eros porttitor, tincidunt nunc sit nascetur purus risus sed adipiscing augue, porta a proin. Pid platea pid dignissim adipiscing dapibus dolor turpis placerat augue et urna, mauris porttitor ut ac, ut mid. Pid, est vut placerat mattis lectus! Mattis in mus, augue scelerisque in. In velit, dictumst ut mus tincidunt dapibus? Est, velit vel? Risus pulvinar penatibus ut amet sociis, est montes."></div> 
 
</div>

Answer 1

这是你与一对夫妇的调整挂钩一个以上的文字工作的代码。请花些时间将它与原文进行比较。

/** 
 
* http://pixelhunter.me/ 
 
* 
 
* text {String} - printing text 
 
* n {Number} - from what letter to start 
 
* display - class where the text is printed 
 
*/ 
 
function typeWriter(text, n, display) { 
 
    if (n < (text.length)) { 
 
    $('.' + display).html(text.substring(0, n+1)); 
 
    n++; 
 
    setTimeout(function() { 
 
     typeWriter(text, n, display) 
 
    }, 100); 
 
    } 
 
} 
 

 
$('.start').click(function(e) { 
 
    e.stopPropagation(); 
 
    
 
    var text = $('.test').data('text'); 
 
    
 
    typeWriter(text, 0, "test"); 
 
}); 
 

 
$('.other-start').click(function(e) { 
 
    e.stopPropagation(); 
 
    
 
    var text = $('.other-test').data('text'); 
 
    
 
    typeWriter(text, 0, "other-test"); 
 
});

@import url(https://fonts.googleapis.com/css?family=Cutive+Mono); 
 

 
body { 
 
    font: 16px/20px 'Cutive Mono', serif; 
 
} 
 

 
a { 
 
    color: #222; 
 
} 
 

 
.wrap { 
 
    width: 500px; 
 
    margin: 30px auto; 
 
    text-align: center; 
 
} 
 

 
.test { 
 
    margin-top: 10px; 
 
    text-align: left; 
 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <a href="#" class="start">Click to print</a> 
 
    <div class="test" data-text="Augue ac adipiscing quis, arcu auctor! Elementum. Non vel vel augue odio et in et est, integer, porta sed parturient rhoncus habitasse! Et porttitor duis pulvinar pulvinar proin ac augue ac sagittis scelerisque, elementum integer eros. Sed, nec! Porta, dapibus in quis elementum penatibus adipiscing, nec adipiscing adipiscing purus lacus odio dolor diam a, elementum etiam? Placerat, etiam eros porttitor, tincidunt nunc sit nascetur purus risus sed adipiscing augue, porta a proin. Pid platea pid dignissim adipiscing dapibus dolor turpis placerat augue et urna, mauris porttitor ut ac, ut mid. Pid, est vut placerat mattis lectus! Mattis in mus, augue scelerisque in. In velit, dictumst ut mus tincidunt dapibus? Est, velit vel? Risus pulvinar penatibus ut amet sociis, est montes."></div> 
 

 
<a href="#" class="other-start">Click to print</a> 
 
<div class="other-test" data-text="Bacon ipsum dolor amet pork chop meatball short ribs corned beef, drumstick bacon turkey kielbasa pig jowl ground round jerky. Porchetta corned beef doner pig salami burgdoggen capicola jowl tenderloin bacon shoulder hamburger t-bone pancetta. Ball tip jowl spare ribs, picanha fatback capicola shankle boudin. Andouille rump brisket capicola doner, pastrami jerky pork loin jowl meatball. Swine pork loin prosciutto tail cow sausage. Ribeye jerky bresaola biltong venison tail shank chicken boudin picanha short loin shoulder kevin."></div> 
 
</div>