单击逻辑--使用jQuery交换图标

单击逻辑--使用jQuery交换图标,jquery,Jquery,我有两个按钮显示/隐藏下面的区域。默认情况下,两个按钮都有以下图标:“ui-icon-triangle-1-e 当一个按钮被点击时,我想将被点击按钮的图标改为:“ui-icon-triangle-1-s,并在下面显示适当的部分,同时隐藏另一部分(如果它是打开的) 当我展开一个部分,然后单击另一个按钮时,我似乎无法正确理解逻辑。区域正确交换,但按钮图标不更新 需要更多的眼睛来看着我,告诉我我错过了什么 $(".features").bind("click", function () { v

我有两个按钮显示/隐藏下面的区域。默认情况下,两个按钮都有以下图标:“ui-icon-triangle-1-e

当一个按钮被点击时,我想将被点击按钮的图标改为:“ui-icon-triangle-1-s,并在下面显示适当的部分,同时隐藏另一部分(如果它是打开的)

当我展开一个部分,然后单击另一个按钮时,我似乎无法正确理解逻辑。区域正确交换,但按钮图标不更新

需要更多的眼睛来看着我,告诉我我错过了什么

$(".features").bind("click", function () {
    var that = this,
        pid  = $(this).attr("id"),
        pidC = pid + "C",
        index = $(this).closest("td").index();

    $(".features").find("span").removeClass("ui-icon-triangle-1-s").addClass("ui-icon-triangle-1-e");
    $(that).find("span").removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s");

    // indicator OFF for all
    $(".ui-icon-triangle-1-s").removeClass("ui-icon-triangle-1-s").addClass("ui-icon-triangle-1-e");
    $("#prT").find("td").removeClass("txtCCC");

    $.each($("#prT").find("tr").children(), function () {
        if ($(that).index() != index) {
            $(that).addClass("txtCCC");
        }
    });

    if ($(".fList").hasClass("current")) {
        $(".fList:visible").slideUp().removeClass("current");

        if ($(".fList:visible").attr("id") != pidC) {
            $("#" + pidC).slideDown(function(){
            }).addClass("current"); 
        }           
    } else {        
        $("#" + pidC).slideDown(function(){
            $(".ui-icon-triangle-1-e", that).removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s");
        }).addClass("current");

    }
});

这可能会有帮助:是的,这是最好的方法。我把代码复杂化了。。。和往常一样;)