使用jQuery根据modality输入值控制标签与输入框显示隐藏失效求助

问题原因 #

• 你的代码只在页面加载完成时执行了一次，没有监听modality输入框的内容变化事件，后续你在输入框里填写内容的时候不会触发显隐逻辑
• hidden是HTML布尔属性，使用attr("hidden", false)的写法不符合规范，设置为隐藏时可以添加该属性，要显示的话需要直接移除属性，或者直接用jQuery封装的show()、hide()方法更稳妥

修正后的代码 #

$(document).ready(function() {
  // 封装显隐逻辑为公共函数
  function toggleFields() {
    var mod = $('#modality').val().trim();
    // 先默认隐藏所有可选字段
    $('#l_clinic, #clinic, #l_phone, #phone, #l_link, #link').hide();
    // 根据取值显示对应字段
    if (mod === "On Site") {
      $('#l_clinic, #clinic').show();
    } else if (mod === "Telephonic") {
      $('#l_phone, #phone').show();
    } else if (mod === "Videochat") {
      $('#l_link, #link').show();
    }
  }

  // 页面初始化时执行一次
  toggleFields();
  // 监听输入框的input事件，内容变化时触发逻辑
  $('#modality').on('input', toggleFields);
});

如果要继续用hidden属性实现，也可以改成下面的写法：

function toggleFields() {
  var mod = $('#modality').val().trim();
  $('#l_clinic, #clinic').attr('hidden', mod !== "On Site");
  $('#l_phone, #phone').attr('hidden', mod !== "Telephonic");
  $('#l_link, #link').attr('hidden', mod !== "Videochat");
}

如果希望只有输入完全匹配对应值的时候才触发显隐，保持当前逻辑即可；如果要降低用户输入出错的概率，更推荐把modality改成<select>下拉框，避免用户输入错别字导致匹配失败。

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