JQuery切换HTML元素visibility属性失效问题排查求助

错误根源 #

1. jQuery对象与原生DOM元素混淆：通过$(#compose${msgid})获取的是jQuery包装后的对象，并非原生DOM元素，直接访问.style属性会返回undefined，这就是触发Cannot read properties of undefined (reading 'visibility')错误的核心原因。
2. 样式判断逻辑不匹配：初始表格的样式是visibility: collapse，但代码中判断的是msgAttr=='hidden'，即便解决第一个问题，逻辑也无法正确触发显示/隐藏切换。

修复方案（三种可选） #

方案一：使用jQuery原生方法操作样式

直接用jQuery的.css()方法读取和设置元素样式，无需转换为原生DOM元素：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a style="text-decoration: none;" href="#" onclick="composeMsg('1'); return false;" title="Button"> Click Button </a>

<table width="100%" height="100%" border="0" id="compose1" style="visibility: collapse;">
<tr>
<td align="bottom" valign="bottom">
My Table
</td>
</tr>
</table>

<script>
function composeMsg(msgid) {  
    var $table = $(`#compose${msgid}`);
    var currentVisibility = $table.css('visibility');
    
    if (currentVisibility === 'collapse') {
        $table.css('visibility', 'visible');
    } else {
        $table.css('visibility', 'collapse');
    }
}  
</script>

方案二：转换为原生DOM元素操作

通过[0]或.get(0)从jQuery对象中取出原生DOM元素，再操作其.style属性：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a style="text-decoration: none;" href="#" onclick="composeMsg('1'); return false;" title="Button"> Click Button </a>

<table width="100%" height="100%" border="0" id="compose1" style="visibility: collapse;">
<tr>
<td align="bottom" valign="bottom">
My Table
</td>
</tr>
</table>

<script>
function composeMsg(msgid) {  
    var table = $(`#compose${msgid}`)[0];
    var currentVisibility = table.style.visibility;
    
    if (currentVisibility === 'collapse') {
        table.style.visibility = 'visible';
    } else {
        table.style.visibility = 'collapse';
    }
}  
</script>

方案三：CSS类切换（更优雅）

定义CSS类控制显示状态，用jQuery的.toggleClass()实现一键切换：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.table-hidden {
    visibility: collapse;
}
.table-visible {
    visibility: visible;
}
</style>

<a style="text-decoration: none;" href="#" onclick="composeMsg('1'); return false;" title="Button"> Click Button </a>

<table width="100%" height="100%" border="0" id="compose1" class="table-hidden">
<tr>
<td align="bottom" valign="bottom">
My Table
</td>
</tr>
</table>

<script>
function composeMsg(msgid) {  
    $(`#compose${msgid}`).toggleClass('table-hidden table-visible');
}  
</script>

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