修改JavaScript实现：点击元素时，输入无ID则从Select获取ID

现有功能：点击.it元素时，会输出对应分组里input标签的ID。但新增的第三个字段中，ID设置在select标签而非input上，需要修改JavaScript代码，实现当input的ID为undefined时，从同组的select标签中获取ID。

原JavaScript代码 #

$('.form-group input').each(function() {
    let input = $(this);
    $(this).closest('.range').find('.it').each(function() {
        $(this).on('click', function () {
           console.log(input.attr('id'));
        })
    })
});

对应HTML结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="range">
  <div class="form-group">
    <input type="hidden" name="field1" id="field1" value="">
  </div>
  <span class="it" data-value="1">click</span>
  <span class="it" data-value="2">click</span>
</div>
<br>
<div class="range">
  <div class="form-group">
    <input type="hidden" name="field2" id="field2" value="">
  </div>
  <span class="it" data-value="1">click</span>
  <span class="it" data-value="2">click</span>
</div>
<br>
<div class="range">
  <div class="form-group">
    <input type="hidden" name="field3" value="" disabled="">
    <select id="field3" class="d-none" name="field3[]" disabled="" multiple="" size="4" style="display: none">
      <option value="1">$0-20</option>
    </select>
  </div>
  <span class="it" data-value="1">click</span>
  <span class="it" data-value="2">click</span>
</div>

修改后的JavaScript代码 #

$('.range').each(function() {
    // 获取当前分组下的form-group容器
    const formGroup = $(this).find('.form-group');
    // 优先取input的ID，没有的话取select的ID
    const targetId = formGroup.find('input').attr('id') || formGroup.find('select').attr('id');
    
    // 给当前分组下的.it元素绑定点击事件
    $(this).find('.it').on('click', function() {
        console.log(targetId);
    });
});

修改说明 #

• 调整遍历层级：从遍历input改为遍历.range分组，统一处理每个分组内的所有表单控件，避免只依赖input存在的情况。
• 优先获取策略：先尝试获取input的ID，若返回undefined（即input无ID），则自动取同组select的ID。
• 简化事件绑定：无需嵌套遍历，直接给每个分组下的所有.it元素绑定事件，逻辑更清晰，性能更优。

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