Jquery 如何对5状态切换链接进行编码

我有一个HTML表格，其中一些TDs具有内联样式、标题标记和链接 我希望用户可以通过反复按同一图标来隐藏这些元素，例如，第一次单击仅删除样式，第二次单击仅删除链接，第三次单击仅删除标题标签，第四次单击删除所有内容，第五次单击恢复所有内容

下面是我如何删除单个元素的

$('a .icon-remove').click(function () {
    $('.mindteq_content_tbl_container td[style]').css('background-color', '').css('color', '');
});

标题标签和链接也是如此

$('.tbl_container td a[title]').remove();

$('.tbl_container td a').removeAttr('href').css('border-bottom', '0px');

---

但是我不知道如何制作这种5状态按钮。

您不应该删除元素，只需使用

hide（）

，因为以后需要它们才能再次显示

对于5状态按钮，您需要一个指示器来了解链接的当前状态。可以通过使用变量或aria属性来实现这一点

使用aria的样本

$(function() {
    $(".toggle").click(function() {
        var $this = $(this);
        var state = parseInt($this.attr('aria-state')) || 0;
        state++;

        $this.text("toggle "+state);
        switch(state) {
            case 5:
                //action 5
                break;
            case 4:
                //action 4
                break;
            case 3:
                //action 3
                break;
            case 2:
                //action 2
                break;
            case 1:
                //action 1
                break;
        }

        if(state >= 5)
            state = 0;

        $this.attr('aria-state', state);
    });    
});

进一步的改进是创建jquery ui小部件并为5个州创建EventHandler。

@Nicero正在处理它：-）请检查更新的答案。