元素显示隐藏异常：点击表格字段无法再次唤起输入框求助

嘿，我瞅了下你的代码，问题其实很明确：第一次输入完成后，你把包含输入框的<td>元素里的内容直接替换成了文本，导致原来的输入框被彻底移除了，所以第二次点击的时候自然找不到输入框来显示了。

具体来说，你在blur事件里执行了$(parent).text(value / 4)，这里的parent就是那个带有.showInput类的<td>，text()方法会清空这个td里的所有子元素（包括你的<input>），然后插入新的文本内容。这就导致后续点击这个td时，对应的input已经不存在了，toggle()自然起不了作用。

修复方案 #

我们需要调整结构，把显示数值的文本和输入框分开存放，避免覆盖输入框。具体步骤如下：

1. 修改HTML结构：在每个.showInput的td里，添加一个<span>用来显示计算后的原始数值，默认显示；输入框保持隐藏。
2. 调整JS逻辑：点击td时，切换span和input的显示状态，focus输入框；输入完成后，更新span的文本，隐藏输入框显示span。

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="carbos">
    <th>Carbohydrates</th>
    <td class="showInput" data-style="carboInput">
      <span class="display-value">点击输入</span>
      <input class="multyFour" type="text" id="carboInput" placeholder="Enter a Number" style="display:none">
    </td>
    <td class="totalCalories" style="display:none"></td>
  </tr>
  <tr>
    <th>Fats</th>
    <td class="showInput" data-style="carboFats">
      <span class="display-value">点击输入</span>
      <input type="text" class="multyNine" placeholder="Enter a Number" id="carboFats" style="display:none">
    </td>
    <td class="totalCalories" style="display:none"></td>
  </tr>
  <tr>
    <th>Protein</th>
    <td class="showInput" data-style="carboProtein">
      <span class="display-value">点击输入</span>
      <input type="text" class="multyFour" placeholder="Enter a Number" id="carboProtein" style="display:none">
    </td>
    <td class="totalCalories" style="display:none"></td>
  </tr>
</table>

<script>
$(document).ready(function() {
  $('.showInput').on('click', function() {
    const inputId = $(this).attr('data-style');
    const $input = $('#' + inputId);
    const $display = $(this).find('.display-value');
    
    // 切换显示状态
    $display.hide();
    $input.show().focus();
  });
});

$(document).ready(function() {
  $('.multyFour').on('blur', function() {
    const inputVal = parseFloat($(this).val());
    if (isNaN(inputVal)) return; // 处理非数字输入
    
    const total = inputVal * 4;
    const $parentTd = $(this).closest('.showInput');
    const $display = $parentTd.find('.display-value');
    const $totalTd = $parentTd.next('.totalCalories');
    
    // 更新显示内容
    $display.text(inputVal).show();
    $totalTd.text(total).show();
    $(this).hide().val(''); // 清空输入框并隐藏
  });
});

$(document).ready(function() {
  $('.multyNine').on('blur', function() {
    const inputVal = parseFloat($(this).val());
    if (isNaN(inputVal)) return; // 处理非数字输入
    
    const total = inputVal * 9;
    const $parentTd = $(this).closest('.showInput');
    const $display = $parentTd.find('.display-value');
    const $totalTd = $parentTd.next('.totalCalories');
    
    // 更新显示内容
    $display.text(inputVal).show();
    $totalTd.text(total).show();
    $(this).hide().val(''); // 清空输入框并隐藏
  });
});
</script>

关键改进点 #

• 新增了.display-value的span来显示数值，和输入框共存于td中，避免被覆盖
• 用closest('.showInput')替代this.parentNode，代码更健壮
• 增加了非数字输入的判断，避免NaN错误
• 移除了重复的id="totalCalories"（同一个页面id必须唯一，改成class）
• 点击td时，隐藏显示文本，显示输入框；blur时反过来，保留输入框的存在

这样修改后，不管点击多少次td，输入框一直存在，只是切换显示状态，就能正常唤起输入框了。

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