Question

我正在使用ZeroClipboard的以下代码将我的'副本的innerHTML文本和类更改为剪贴板按钮'。点击后，这会激活班级转换。

client.on( "complete", function(client, args) {
            this.innerHTML = 'Copied to Clipboard';
            $( this ).removeClass( "btn-info" ).addClass( "btn-success", 357 );         
            });

有没有办法让我可以对class和innerHTML进行临时更改？即更改类（至btn-success）仅几秒钟以指示单击按钮，并自动恢复为原始类（btn-info）？并删除添加的innerHTML = 'Copied to Clipboard'

因此，班级转换为“btn-info”＆gt; 'btn-success'＆gt; 'btn-info'。并将innerHTML恢复为预先设置的状态（每个按钮具有不同的innerHTML）。

我尝试过使用toggleClass，但运气不好。

Answer 1

尝试使用简单的超时

client.on("complete", function (client, args) {
    var html = this.innerHTML;
    this.innerHTML = 'Copied to Clipboard';
    var $this = $(this).removeClass("btn-info").addClass("btn-success");

    //clear previous timer
    clearTimeout($this.data('completeToggler'))
    var timer = setTimeout(function () {
        $this.addClass("btn-info").removeClass("btn-success");
        $this.html(html)
    }, 2000);
    $this.data('completeToggler', timer);
});

演示：Fiddle

也尝试使用toggleClass（）

client.on("complete", function (client, args) {
    this.innerHTML = 'Copied to Clipboard';
    var $this = $(this).toggleClass("btn-info btn-success");
    setTimeout(function () {
        $this.toggleClass("btn-info btn-success");
    }, 2000)
});

jQuery：暂时toggleClass / addClass，removeClass？

1 个答案: