条件满足时为点击的显示/隐藏按钮对应panel-body添加CSS属性问题

你遇到的核心问题是全局选择器导致操作了所有panel-body，而非仅针对带有fa-eye-slash图标的按钮对应的面板。我们可以通过精准定位每个目标按钮的关联面板来解决这个问题，同时还要修正代码里的其他选择器错误。

原代码的问题分析 #

1. 类选择器语法错误：你写的$("panel")、$("panel-heading")、$("payslip-label")是在查找标签名（比如<panel>），但这些都是CSS类名，必须加上.前缀才能正确选中目标元素，否则当前代码根本找不到对应的DOM节点。
2. 全局操作逻辑错误：$("button.close").parent().siblings().css("display", "none")会选中页面上所有button.close元素，然后批量操作它们的兄弟节点，导致所有panel-body都被隐藏，而不是只处理带有fa-eye-slash图标的按钮对应的面板。

修正后的完整代码方案 #

先修正类选择器的语法错误，再替换原来的if判断块，改为遍历每个符合条件的按钮，精准定位对应的panel-body：

$(document).on('click', '#btnCreate', function() { 
    var subject = $('#txtSubject').val(); 
    // 修正类选择器，添加.前缀
    $(".panel").contents().unwrap(); 
    $(".panel-heading").css("display", "none"); 
    $(".payslip-label").css("display", "block"); 

    // 遍历所有包含fa-eye-slash图标的close按钮，逐个处理对应面板
    $("button.close:has(i.fa-eye-slash)").each(function() {
        // 方式1：利用固定结构直接定位（按钮在panel-heading内，其下一个兄弟就是panel-body）
        $(this).parent().next(".panel-body").css("display", "none");
        
        // 方式2：更健壮的定位方式（适配结构变化，先找外层panel容器再找内部panel-body）
        // $(this).closest(".panel").find(".panel-body").css("display", "none");
    });

    var body = $('#templateBody').html(); 
    $.ajax({ 
        url: myRoot + 'Template/AddTemplate', 
        type: 'POST', 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        data: JSON.stringify({ htmlBody: body, txtSubject: subject }), 
        beforeSend: function(e) { 
            $('#overlay').show(); 
            $('#btnCreate').attr("disabled", "disabled"); 
            $('#btnCancel').attr("disabled", "disabled"); 
        }, 
        async: true, 
        success: function(data) { 
            $('#overlay').hide(); 
            console.log(data); 
            location.reload(); 
        }, 
        error: function(err) { 
            $('#overlay').hide(); 
            // 修正removeAttr的语法，只需传入属性名
            $('#btnSave').removeAttr("disabled"); 
            $('#btnCancel').removeAttr("disabled"); 
        } 
    }); 
});

关键逻辑说明 #

• $("button.close:has(i.fa-eye-slash)")：通过:has()选择器精准筛选出包含fa-eye-slash图标的关闭按钮，避免全局选中所有button.close。
• .each(function() { ... })：遍历每个符合条件的按钮，确保每个按钮只操作自己对应的面板，不会影响其他面板。
• 两种定位panel-body的方式：
  • 若HTML结构固定（按钮始终在panel-heading内，panel-heading的下一个兄弟就是panel-body），用parent().next(".panel-body")更高效；
  • 若未来页面结构可能调整，推荐用closest(".panel").find(".panel-body")，先找到最外层的panel容器，再在容器内查找panel-body，兼容性更强。

另外，原代码中removeAttr("disabled", "disabled")的语法错误也已修正，removeAttr方法仅需传入要移除的属性名即可。

内容的提问来源于stack exchange，提问作者Terence