如何用JavaScript实现表格双按钮切换及输入框显隐控制？

核心问题分析 #

• jQuery选择器错误：通过ID选择元素时必须加#前缀，原代码里$('cloginbtn')这类写法会被当作标签名查找，根本找不到目标按钮和区域，导致样式切换、显示隐藏全失效。
• 缺少目标DOM元素：HTML里没定义shortNameRow对应的输入区域，就算JS逻辑正确，也没有可操作的对象。

修复后的完整代码 #

JS代码

function clogin() {
  $('#vloginbtn').removeClass("selectedBtn");
  $('#cloginbtn').addClass("selectedBtn");
  $('#shortNameRow').show();
}

function vlogin() {
  $('#cloginbtn').removeClass("selectedBtn");
  $('#vloginbtn').addClass("selectedBtn");
  $('#shortNameRow').hide();
}

CSS代码

.selectedBtn {
  color: red;
}

HTML代码

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

<div id="buttons">
  <button id="cloginbtn" type="button" onclick="clogin()" class="switchBtn selectedBtn">CLIENT LOGIN</button>
  <button id="vloginbtn" type="button" onclick="vlogin()" class="switchBtn">VENDOR LOGIN</button>
</div>
<!-- 新增shortNameRow输入区域 -->
<div id="shortNameRow">
  <label>短名称：</label>
  <input type="text" placeholder="请输入短名称">
</div>

额外优化建议 #

如果不想用内联onclick，可以改成jQuery事件绑定，代码更整洁：

$(function() {
  $('#cloginbtn').click(function() {
    $('#vloginbtn').removeClass("selectedBtn");
    $(this).addClass("selectedBtn");
    $('#shortNameRow').show();
  });
  
  $('#vloginbtn').click(function() {
    $('#cloginbtn').removeClass("selectedBtn");
    $(this).addClass("selectedBtn");
    $('#shortNameRow').hide();
  });
});

对应的HTML里去掉按钮的onclick属性即可。

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