jQuery条件语句异常：Quill与Memberstack表单数据填充问题

核心问题点 #

• 拼写错误：第三个条件里的quillLocations.root.HTML应为quillLocations.root.innerHTML（属性名需小写）
• 条件判断逻辑失效：原写法quillBio.root.innerHTML == "<p><br></p>" || ""不成立，|| ""会让表达式始终为真，需明确判断编辑器内容是否为默认空段落或空字符串
• 隐藏区块取值错误：bioHidden是普通DOM元素，不是Quill实例，不能用.root.innerHTML，直接调用.innerHTML即可

修复后的代码 #

var quillBio = new Quill('#editor_bio', {
  modules: {
    toolbar: [
      ['bold', 'italic'],
      ['link'],
      [{ list: 'ordered' }, { list: 'bullet' }]
    ]
  },
  placeholder: 'Type here',
  theme: 'snow'
});

var quillLocations = new Quill('#editor_locations', {
  modules: {
    toolbar: [
      ['bold', 'italic'],
      ['link'],
      [{ list: 'ordered' }, { list: 'bullet' }]
    ]
  },
  placeholder: 'Type here',
  theme: 'snow'
});

var bioHidden = document.getElementById('bio_hidden');
var locationsHidden = document.getElementById('locations_hidden');
var bio = document.querySelector('textarea[name=bio]');
var locations = document.querySelector('textarea[name=locations]');

var form = document.querySelector('form[name=medical-update-form]');
form.onsubmit = function() {  
  // 提取判断编辑器是否为空的工具函数
  function isQuillEmpty(quillInstance) {
    const content = quillInstance.root.innerHTML.trim();
    return content === "" || content === "<p><br></p>";
  }

  const isBioEmpty = isQuillEmpty(quillBio);
  const isLocationsEmpty = isQuillEmpty(quillLocations);

  // 按逻辑赋值
  if (isBioEmpty && isLocationsEmpty) {
    bio.value = bioHidden.innerHTML;
    locations.value = locationsHidden.innerHTML;
  } else if (isBioEmpty) {
    bio.value = bioHidden.innerHTML;
    locations.value = quillLocations.root.innerHTML;
  } else if (isLocationsEmpty) {
    bio.value = quillBio.root.innerHTML;
    locations.value = locationsHidden.innerHTML;
  } else {
    bio.value = quillBio.root.innerHTML;
    locations.value = quillLocations.root.innerHTML;
  }
    
  console.log("Submitted", $(form).serialize(), $(form).serializeArray());
  // No back end to actually submit to!
  return false;
};

优化说明 #

• 新增工具函数isQuillEmpty，避免重复判断逻辑，提升代码可读性
• 用trim()处理编辑器内容，排除空白字符导致的误判
• 用变量存储空状态结果，简化条件分支结构

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