2

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

我拥有的是一个超链接列表，每个超链接在单击时都会经过一个短序列并处于不同的状态，如果再次单击它们，则会恢复到原始状态。

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

谢谢

4

3 回答 3

0

好吧，这里的主要问题是您在单击时将状态设置为 0。将其移出 .on()

于 2013-08-16T09:16:22.363 回答
0

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

现场演示

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/

于 2013-08-16T09:39:34.873 回答
-1

每次事件完成时，局部变量 state 都会被销毁。如果要保留状态，则必须使用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');

在这里，我将点击状态存储在您的链接的一个名为data-state的属性中

有关使用 attr() 的更多信息，您可以查看： http ://api.jquery.com/attr/

于 2013-08-16T09:35:37.930 回答