jquery - 单击切换时更新元素的 HTML

Question

我正在尝试在单击表时更新表中字段的 HTML。单击它时，将应用一个类并在“headerSortUp”和“headerSortDown”之间交替。

这是我到目前为止所拥有的：

$(document).on('click', "table#archive-table thead tr th.headerSortUp", function(){ 
    $(this).html('Date <span class="ss-icon ss-gizmo">up</span>');
}); 

我还需要添加，所以如果类是“headerSortDpwn”，则将 HTML 更新为Date <span class="ss-icon ss-gizmo">down</span>

让我知道您是否可以提供帮助，或者我是否还没有说清楚。

谢谢，R

更新

http://jsfiddle.net/Rx9pD/1/

Answer 1

试试这个：

$('#archive-table ').on('click', "th", function () {
    if ($(this).hasClass('headerSortUp')) $(this).html('Date <span class="ss-icon ss-gizmo">up</span>');
    else if ($(this).hasClass('headerSortDown')) $(this).html('Date <span class="ss-icon ss-gizmo">down</span>');
});

Answer 2

$("table#archive-table thead tr th").click(function (e) {

    if ($(this).hasClass("headerSortUp")){
        $(this).removeClass("headerSortUp");
        $(this).addClass("headerSortDown");
    }
    else{
        $(this).removeClass("headerSortDown");
        $(this).addClass("headerSortUp");
        S(this).html('Date <span class="ss-icon ss-gizmo">down</span>');
    }
});

在 html() 函数中放置整个 html 而不是您在问题中提供的内容。我还假设headerSortUp该类最初应用于您的th单元格。