React中检测到变更时切换元素类型的实现方案

嘿，我明白你要实现的效果了——勾选"Other"选项时把它的文本换成输入框，同时兼容原来的输入框切换逻辑对吧？我给你整理了一套可行的方案，结合你现有的结构来改：

先假设你现有HTML结构大概是这样（方便对应修改） #

<ul class="checkbox-list">
  <li>
    <input type="checkbox" id="option1">
    <a href="#" class="tooltip" title="Option 1 tooltip">Option 1</a>
    <input type="text" class="hidden-input" style="display:none;">
  </li>
  <!-- 其他选项... -->
  <li>
    <input type="checkbox" id="option-other">
    <a href="#" class="tooltip" title="Other option tooltip">Other</a>
    <input type="text" class="hidden-input" style="display:none;">
  </li>
</ul>

第一步：给"Other"选项加专属标识 #

先给"Other"的复选框和对应的tooltip标签加个类名，方便JS精准定位，避免影响其他选项：

<li>
  <input type="checkbox" id="option-other" class="other-checkbox">
  <a href="#" class="tooltip other-label" title="Other option tooltip">Other</a>
  <input type="text" class="hidden-input other-hidden-input" style="display:none;">
</li>

第二步：扩展现有切换函数，加入"Other"替换逻辑 #

假设你现在用来切换输入框的函数是类似这样的：

function toggleInput(checkbox) {
  const input = checkbox.nextElementSibling.nextElementSibling;
  input.style.display = checkbox.checked ? 'inline-block' : 'none';
}

那我们直接在这个函数里加特殊处理逻辑就行，还要提前保存原来的"Other"文本，方便取消勾选时恢复：

// 先存好原来的"Other"文本，别弄丢了
const originalOtherText = document.querySelector('.other-label').textContent;

function toggleInput(checkbox) {
  // 保留你原来的输入框切换逻辑
  const input = checkbox.nextElementSibling.nextElementSibling;
  input.style.display = checkbox.checked ? 'inline-block' : 'none';

  // 专门处理"Other"选项
  if (checkbox.classList.contains('other-checkbox')) {
    const otherTooltip = checkbox.nextElementSibling;
    if (checkbox.checked) {
      // 创建自定义输入框，替换掉原来的文本
      const customInput = document.createElement('input');
      customInput.type = 'text';
      customInput.placeholder = '输入自定义选项';
      // 把原来tooltip的title属性继承过来，保留提示功能
      customInput.title = otherTooltip.title;
      // 替换a标签里的内容为这个输入框
      otherTooltip.innerHTML = '';
      otherTooltip.appendChild(customInput);
      // 自动聚焦，提升用户体验
      customInput.focus();
    } else {
      // 取消勾选时，把文本恢复回去
      otherTooltip.textContent = originalOtherText;
    }
  }
}

第三步：给所有复选框绑定事件 #

确保每个复选框都触发这个函数，包括"Other"选项：

const allCheckboxes = document.querySelectorAll('.checkbox-list input[type="checkbox"]');
allCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    toggleInput(this);
  });
});

额外小细节（可选） #

• 如果你的tooltip是用第三方库（比如Bootstrap的Tooltip）做的，替换内容后可能需要重新初始化tooltip，比如：

  // 假设用的是Bootstrap Tooltip
  if (checkbox.checked) {
    new bootstrap.Tooltip(customInput);
  } else {
    new bootstrap.Tooltip(otherTooltip);
  }
  

• 可以给自定义输入框加个类名，调整样式和原来的a标签一致：

  .custom-other-input {
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
    text-decoration: underline; /* 和a标签保持一样的下划线样式 */
  }
  

  记得创建输入框的时候加上这个类：customInput.classList.add('custom-other-input');

这样改完之后，勾选"Other"就会变成输入框，取消勾选又恢复成原来的文本，同时完全兼容你原来的输入框切换逻辑，tooltip功能也保留了~

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