Question

我有一种明显的感觉，我会以错误的方式解决这个问题。

我所拥有的是超链接列表，点击时每个超链接都通过一个短序列运行并保持不同的状态，如果再次单击它们，则恢复到原始状态。

var favourites = function(action, trgt){
var state = 0
$(trgt).on(action, function(e){
    if(state === 0){
        state = 1;
        thistrgt = $(e.currentTarget);
        thistrgt.css('opacity', '0.6');
        thistrgt.removeClass('favourites');
        thistrgt.addClass('favouriteschangestate');
        thistrgt.text('Saving to favourites');
        setTimeout(function(){
            thistrgt.css('opacity', '1');
            thistrgt.text('Saved!');
            setTimeout(function(){
                thistrgt.text('Remove from favourites');
            },2000);
        }, 2000);
    }else if(state === 1){
        state = 0;
        thistrgt = $(e.currentTarget);
        thistrgt.css('opacity', '0.6');
        thistrgt.removeClass('favouriteschangestate');
        thistrgt.addClass('favourites');
        thistrgt.text('Removing from favourites');
        setTimeout(function(){
            thistrgt.css('opacity', '1');
            thistrgt.text('Removed!');
            setTimeout(function(){
                thistrgt.text('Add from favourites');
            },2000);
        }, 2000);
    }
    return false;
});

}
// fire
favourites('click', '.favourites');

第二种状态是尝试将点击恢复到原始状态。

目前，每个链接都是单独发射的，但存在许多问题;第一个是if语句失败，墨水再次点燃相同的位。第二个问题是，如果我连续过快地点击链接，他们会断开并锁定。

这是一个jsFiddle

感谢

Answer 1

简化您的代码，使用ternary operators (?:)定义您的文字，状态...
将当前状态存储为data-*属性作为布尔值，并重复使用它来定义状态：

<强> LIVE DEMO

var favourites = function (action, trgt) {
    $(trgt).one(action, function oneClick(e) { // one to prevent multiple clicks
        e.preventDefault();
        var $this = $(e.target),       
            dS = $this.data('state');    
        $this.data('state', !dS)               // toggle and store data state
           .css('opacity', '0.6')
           .toggleClass('favouriteschangestate favourites')
           .text(dS? 'Removing from favourites':'Saving to favourites');       
        setTimeout(function () {
            $this.text(dS? 'Removed!':'Saved!');
            setTimeout(function () {
                $this.css('opacity', '1')
                     .text(dS? 'Add to favourites':'Remove from favourites')
                     .one('click',oneClick);   // allow click again
            }, 2000);
        }, 2000);
    });
};

// fire
favourites('click', '.favourites');

另见：
http://api.jquery.com/toggleClass/
http://api.jquery.com/one/

Answer 2

好吧，这里的主要问题是你点击时将状态设置为0。将它移出.on（）

Answer 3

每次事件结束时，本地变量状态都会被销毁。如果要保留状态，则必须使用 attr（）在链接中添加属性。

以下是Fiddle的更新：

var favourites = function(action, trgt){
    $(trgt).on(action, function(e){
        var state = 0;

        if($(this).attr('data-state'))
            state=$(this).attr('data-state');


        if(state == '0'){

            thistrgt = $(e.currentTarget);
            thistrgt.css('opacity', '0.6');
            thistrgt.removeClass('favourites');
            thistrgt.addClass('favouriteschangestate');
            thistrgt.text('Saving to favourites');
            thistrgt.attr('data-state','1');
            setTimeout(function(){
                thistrgt.css('opacity', '1');
                thistrgt.text('Saved!');
                setTimeout(function(){
                    thistrgt.text('Remove from favourites');
                },2000);
            }, 2000);
        }else if(state == '1'){

            thistrgt = $(e.currentTarget);
            thistrgt.css('opacity', '0.6');
            thistrgt.removeClass('favouriteschangestate');
            thistrgt.addClass('favourites');
            thistrgt.text('Removing from favourites');
            thistrgt.attr('data-state','0');
            setTimeout(function(){
                thistrgt.css('opacity', '1');
                thistrgt.text('Removed!');
                setTimeout(function(){
                    thistrgt.text('Add from favourites');
                },2000);
            }, 2000);
        }
        return false;
    });

}


favourites('click', '.favourites');

此处，我将点击状态存储在名为数据状态

的链接的属性中

有关使用attr（）的更多信息，您可以检查： http://api.jquery.com/attr/

使用带有jquery的变量更改单击状态

3 个答案: