Question

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

以下是我设法删除单个元素的方法。

$('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状态按钮。

Answer 1

您不应该仅使用hide()删除元素，因为您以后需要再次显示这些元素。

对于5状态按钮，您需要一个指示器来了解链接当前状态。您可以使用变量或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);
    });    
});

on JSFiddle

进一步改进是创建一个jquery-ui小部件并为5个州创建事件处理程序。

如何编写5状态切换链接

1 个答案: