求助：JS/JQuery获取Swiper动态加载文本框值返回空串

核心原因 #

大概率是以下两种情况：

• Swiper开启了loop模式，会克隆滑块生成重复DOM，你用ID选择器拿到的是克隆出来的空输入框，而非用户实际输入的那个；
• 多个滑块AJAX加载后出现重复ID，浏览器只识别第一个ID元素，导致选中的不是当前激活滑块内的输入框。

解决方案 #

1. 用激活滑块上下文+类选择器定位元素 #

放弃ID选择器，通过当前激活的滑块(.swiper-slide-active)来限定查找范围，确保拿到的是用户正在操作的输入框：

$(document).on('click', '.swiper-button-next', function() {
  // 获取当前激活滑块内的输入框
  const inputVal = $('.swiper-slide-active .get-value').val();
  console.log(inputVal);
});

2. 直接读取原生DOM的value属性 #

有时候jQuery的.val()会受DOM状态影响，直接取原生DOM的value更可靠：

$(document).on('click', '.swiper-button-next', function() {
  const inputEl = $('.swiper-slide-active .get-value')[0];
  console.log(inputEl ? inputEl.value : '未找到输入框');
});

3. 关闭Swiper的loop模式（如果不需要） #

如果你的业务不需要循环滑块，直接在Swiper初始化时关闭loop：

const swiper = new Swiper('.swiper-container', {
  loop: false, // 关闭循环克隆
  // 其他配置...
});

4. 排查是否有值被重置的情况 #

如果输入后值莫名消失，绑定实时事件检查输入过程：

$(document).on('keyup input', '.get-value', function() {
  console.log('实时输入值：', this.value);
});

如果这里能正常打印，但点击Next时为空，说明有其他代码在重置输入框的值，需要检查模板加载或Swiper切换时的逻辑。

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