输入框按回车时仅将下一个div的display:none改为display:flex方法

实现交互效果：当div容器内的第一个条码输入框触发回车键按下事件时，仅将紧邻的下一个初始隐藏的同级别div的display:none样式修改为display:flex，不要一次性修改所有后续隐藏div的样式。
所有业务div都统一使用checkoutDiv作为class，全部包裹在id为checkout的父容器内，初始状态仅第一个div为display:flex显示状态，其余div均为display:none隐藏状态。

• 样式设置逻辑错误：$('.checkoutDiv').attr('style', 'display: flex')会选中所有class为checkoutDiv的元素，覆盖其全部内联样式为display:flex，这就是所有后续div被一次性全部显示的根本原因。
• 选择器逻辑错误：div[display="flex"]是匹配HTML标签上自带display属性的元素，无法匹配通过style设置的CSS display样式，根本选不到目标元素。
• 事件绑定目标错误：keypress事件绑定在div容器上，但实际触发回车动作的是div内部的input输入框，容易出现事件触发时机不符合预期的问题。
• 属性操作错误：用.prop("display", "flex")修改样式是无效写法，jQuery中修改单个CSS样式应该用.css()方法。

HTML结构部分 #

<div id="checkout">
  <div class="checkoutDiv" style="display:flex;">
    <input type="text" name="ean" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
    <input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
  </div>

  <div class="checkoutDiv" style="display: none;">
    <input type="text" name="ean" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off">
    <input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
  </div>

  <div class="checkoutDiv" style="display: none;">
    <input type="text" name="ean" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off">
    <input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
  </div>
</div>

修正了原结构中重复的id="focus"和重复的autofocus属性：单页面内id必须唯一，且仅能有一个元素设置自动聚焦属性。给每个div内的第一个输入框（条码输入框）绑定事件即可，不需要额外加id。

JS逻辑部分 #

// 给所有checkoutDiv内的第一个条码输入框绑定回车事件
$('.checkoutDiv input[name="ean"]').on('keydown', function(e) {
  // 按下的不是回车键直接终止逻辑
  if (e.which !== 13) return;

  // 定位当前输入框所属的checkoutDiv容器
  const currentCheckoutDiv = $(this).closest('.checkoutDiv');
  // 找到紧邻的下一个同级checkoutDiv
  const nextCheckoutDiv = currentCheckoutDiv.next('.checkoutDiv');

  // 存在下一个隐藏的div时才执行显示逻辑
  if (nextCheckoutDiv.length && nextCheckoutDiv.css('display') === 'none') {
    // 仅修改当前目标div的display属性，不影响其他元素
    nextCheckoutDiv.css('display', 'flex');
    // 自动聚焦到新显示div的条码输入框，优化操作体验
    nextCheckoutDiv.find('input[name="ean"]').focus();
  }
})

• 事件直接绑定到实际触发回车动作的条码输入框，不需要在父div上做事件冒泡判断，逻辑更直观，触发时机更准确。
• 每次触发回车时，先从当前触发事件的输入框向上找到所属的父div，再找紧邻的下一个同级div，仅操作这一个目标元素，不会批量修改其他后续隐藏div的样式。
• 操作DOM前先判断目标元素是否存在、是否处于隐藏状态，避免没有后续div时控制台抛出错误。
• 用.css('display', 'flex')方法修改单个样式，不会覆盖元素上原有的其他内联样式，比直接重写整个style属性更安全。

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