Javascript 使用jquery变量更改单击状态

我有一种明显的感觉，我走错了方向

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

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');

第二种状态是尝试将单击恢复到其原始状态

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语句失败，墨迹再次触发相同的位。第二个是，如果我连续太快地触发链接，它们就会断开并锁定

这里有一个

---

谢谢

嗯，这里的主要问题是，当您单击时，您正在将状态设置为0。

---

将其移出.on（）

这里的主要问题是，当您单击时，您将状态设置为0。

---

将其从.on（）中上移。

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

以下是您的更新：

在这里，我将点击状态存储在链接的一个名为数据状态的属性中

有关使用attr（）的详细信息，请检查：

---

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

以下是您的更新：

在这里，我将点击状态存储在链接的一个名为数据状态的属性中

有关使用attr（）的详细信息，请检查：

---

简化代码，使用

三元运算符（？：）

来定义文本、状态…
将当前状态作为布尔值存储到

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');

另请阅读：

---

简化代码，使用

三元运算符（？：）

来定义文本、状态…
将当前状态作为布尔值存储到

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');

另请阅读：

---

谢谢，我已经更新了小提琴，但现在它遇到的问题是，它在尚未单击的链接上继续处于第二种状态。--我在函数中更新了数据属性（错误实践）。更改元素的功能现在与交互分离，因此您可以根据需要清理代码。：）谢谢，我已经更新了小提琴，但现在它遇到的问题是，它在尚未点击的链接上继续处于第二种状态我在函数中更新了数据属性（错误实践）。更改元素的功能现在与交互分离，因此您可以根据需要清理代码。：）我已经更新了你的小提琴。您应该使用attr。我已经把答案和提琴一起贴在下面了。我已经更新了你的提琴。您应该使用attr。我已经把答案和小提琴一起贴在下面了，这太棒了！我不知道你可以像那样使用attr（），这正是我想要的，谢谢@Buljan很抱歉返回false，我刚刚通过添加属性更改编辑了现有代码。噢，天哪！那不好！真是疯了！这是因为我单击另一个元素时事件停止了吗？但它似乎还在锁着。这太棒了！我不知道你可以像那样使用attr（），这正是我想要的，谢谢@Buljan很抱歉返回false，我刚刚通过添加属性更改编辑了现有代码。噢，天哪！那不好！真是疯了！这是因为我单击另一个元素时事件停止了吗？但它似乎仍在锁定。我该如何在单击链接后禁用链接，以防止用户在序列完成之前还原它？@RussellSims只需使用命名的

.one（）

函数方法，而不是

.on（）

来查看上面编辑的示例。@RussellSims很高兴我能提供帮助！Happy Coding我如何在点击链接后禁用它，防止用户在序列完成之前还原它？@RussellSims，只需使用命名的

.one（）

函数方法，而不是

.on（）

查看上面编辑的示例。@RussellSims很高兴我能提供帮助！快乐编码