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

时间:2015-07-23 21:26:29

标签: javascript jquery html jquery-plugins

我正在使用typed.js

我想在单击按钮时运行一个功能。但我只能在第一次点击时使typed功能工作一次。

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

请参阅此小提琴,例如:http://jsfiddle.net/mattboldt/tcRUG/

2 个答案:

答案 0 :(得分:2)

Type.js没有给出任何方法。我尝试使用它的api,但它在所有地方使用seTimeout并且异步行为并且没有给出任何promise / deferred对象。为了使其工作,一个解决方案是删除元素并再次创建。我个人不喜欢这个解决方案,看起来很hacky但它​​完成了工作

$(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>

答案 1 :(得分:0)

我最近遇到了类似的问题。我实现了答案,但我也希望以前的字符串“坚持”。

例如,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”。