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对象。为了使其工作，一个解决方案是删除元素并再次创建。我个人不喜欢这个解决方案，看起来很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>

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

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

2 个答案: