JavaScript中如何使用自定义属性选择器点击修改元素的id属性名称

现有代码问题 #

• 变量i未和当前点击元素绑定，直接读取全局i无法匹配对应点击元素
• 运算优先级错误：'image_id_' +i-1会先完成字符串拼接再做减法，最终返回NaN，需要给i-1加括号提升运算优先级
• 事件处理函数缺少闭合的}，存在语法错误
• 不需要二次通过id查询元素，直接通过$(this)即可获取当前点击的元素对象

修正后代码 #

动态生成的HTML结构（原有逻辑无需修改） #

<input id="image_id_' + i + '" name="picturenum" type="text" class="deleteok col s4 m4 validate center" value="' + i + '" disabled>

点击修改id的JS逻辑 #

$('.deleteok').on('click', function () {
  // 从当前元素原有id中提取序号
  const oldId = $(this).attr('id');
  const currentNum = parseInt(oldId.split('_')[2]);
  // 赋值新id
  $(this).attr('id', 'image_id_' + (currentNum - 1));
  // 若需要同步修改输入框value值，可放开下方注释
  // $(this).val(currentNum - 1);
});

拓展场景：删除元素后批量更新所有后续元素的id #

如果你的需求是删除某一个元素后，让所有排在后面的元素id统一减1，可使用批量遍历逻辑：

// 执行删除操作后调用这段代码即可统一重置所有元素序号
$('.deleteok').each(function (index) {
  // index从0开始，若你需要序号从1起始，使用index+1即可
  const newNum = index + 1;
  $(this).attr('id', 'image_id_' + newNum).val(newNum);
});

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