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

Question

我正在使用typed.js 。

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

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

例如，请参见此小提琴： 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

我最近有一个类似的问题。 我实现了答案，但我也希望前面的字符串“粘住”。

例如，我要键入的onclick会在键入新字符串之前退格上一个字符串。

我将此添加到类型的init

// 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”。