点击保存按钮时如何将输入框值添加为父div的类？

DevOps 小满

2026-8-9

解决方案

1. 先明确HTML结构参考

假设你的表单结构大致如下（可根据实际情况调整）：

<div class="input-wrapper">
  <input type="text" class="custom-input" placeholder="输入类名">
</div>
<div class="input-wrapper">
  <input type="text" class="custom-input" placeholder="输入类名">
</div>
<button id="save-button">保存</button>

2. 绑定保存按钮点击事件（核心代码）

别再用输入框的change事件了，直接给保存按钮绑定click事件，只有用户主动点击时才执行操作：

$("#save-button").on("click", function() {
  // 遍历所有目标输入框
  $(".custom-input").each(function() {
    const $input = $(this);
    const inputVal = $input.val().trim(); // 去掉前后空格
    const $parentDiv = $input.parent(); // 获取当前输入框的父div

    // 可选：移除之前添加的自定义类，避免重复累加
    // 这里保留默认类input-wrapper，移除其他用户添加的类
    $parentDiv.attr("class", function(_, currClass) {
      return currClass.split(" ").filter(cls => cls === "input-wrapper").join(" ");
    });

    // 输入值非空时才添加类名，同时过滤非法字符（类名不能有空格、特殊符号）
    if (inputVal) {
      const validClass = inputVal.replace(/[^a-zA-Z0-9-_]/g, "");
      $parentDiv.addClass(validClass);
    }
  });

  // 触发你的保存流程
  doSave();
});

// 示例保存流程函数，替换成你的实际逻辑
function doSave() {
  // 比如提交表单、发AJAX请求等
  console.log("开始执行保存操作");
}