Typed.js - 如何多次调用函数 onClick

Question

我正在使用 typed.js。

我想运行单击按钮时的功能。但是我只能在第一次点击时让 typed 函数工作一次。

$(function(){
    var options = {
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
    }
    $("button").click(function(){
        $(".element").typed(options);
    });
});

参见这个 fiddle 例如：http://jsfiddle.net/mattboldt/tcRUG/

Answer 1

Type.js 没有给出任何方法。我尝试使用它的 api 但它到处都在使用 seTimeout 并且行为异步并且不提供任何 promise/deferred 对象。要让它工作，一种解决方案是删除元素并重新创建。就我个人而言，我不喜欢这个解决方案，看起来很笨拙，但它完成了工作

$(function(){
    var options = {
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0,
        callback: function(){
            var x = $(".element").text();
            $("#maindiv").html("");
            $("#maindiv").append('<span class="element">'+x+'</span>');
        }
    }
    $("button").click(function(){ 
        $(".element").text('');
       $(".element").typed(options);        
    });
});

在HTML

<div id="maindiv"><span class="element"></span></div>
<button>Type!</button>

Answer 2

我最近遇到了类似的问题。我实现了答案，但我也希望前一个字符串为 'stick'。

例如，onclick 我想在输入新字符串之前先将前一个字符串退格。

我将其添加到 typed 的初始化中

// Set the default string
if(self.isDefaultString) {
    self.strPos = self.strings[self.sequence[self.arrayPos]].length;

    if (self.isInput) {
        self.el.val(self.strings[self.sequence[self.arrayPos]]);
    } else if (self.contentType === 'html') {
        self.el.html(self.strings[self.sequence[self.arrayPos]]);
    } else {
        self.el.text(self.strings[self.sequence[self.arrayPos]]);
    }
}

以及启动类型化对象时的状态

// default string of text
this.isDefaultString = this.options.isDefaultString;

然后像这样实现输入

$("#contact header b").typed({
     strings: ["s1", "s2"],
     isDefaultString: true,
     typeSpeed: 30,
     startDelay: 250,
     showCursor: false
});

结果是我会从屏幕上的字符串 "s2" 开始然后键入将删除它并键入 "s1".

这很有用，因为如果您想调用稍后输入的内容，请单击。您可以将默认值设置为 "s2"。然后键入将删除 "s2" 并打印 "s3".

Typed.js - 如何多次调用函数 onClick

Typed.js - how to call function onClick multiple times

html

javascript

jquery

jquery-plugins