如何使用jQuery将变量赋值给输入框的value属性？

问题分析 #

你的代码已经成功获取到目标text变量，但存在两个关键问题：

• 全局选择器document.querySelector('.text_area_box')会选中页面中第一个匹配的元素，无法定位到当前点击按钮所在swiper-slide内的输入框容器
• 缺少将text变量赋值给输入框value属性的逻辑

修正后的代码 #

document.querySelectorAll('i.button').forEach(el => {
    el.addEventListener('click', e => {
        // 获取当前点击按钮所在的swiper-slide容器
        const parentSlide = e.target.closest('.swiper-slide');
        // 定位当前slide内的输入框容器
        const currentTextAreaBox = parentSlide.querySelector('.text_area_box');
        // 定位当前slide内的输入框
        const targetInput = currentTextAreaBox.querySelector('input');

        // 先处理全局已激活的输入框容器（重置样式）
        const activeBox = document.querySelector('.text_area_box_active');
        if (activeBox && activeBox !== currentTextAreaBox) {
            activeBox.classList.remove('text_area_box_active');
            activeBox.classList.add('text_area_box');
        }

        // 切换当前输入框容器的样式
        currentTextAreaBox.classList.toggle('text_area_box');
        currentTextAreaBox.classList.toggle('text_area_box_active');

        // 获取目标文本并赋值给输入框的value
        const text = parentSlide.querySelector('a').textContent.trim();
        targetInput.value = text;
    });
});

关键修改说明 #

• 精准定位元素：通过e.target.closest('.swiper-slide')获取当前点击按钮的父容器，再基于该容器查找内部的输入框容器和输入框，确保操作的是当前slide内的元素，而非全局第一个匹配项
• 优化样式切换逻辑：
  • 先找到全局已激活的容器，若它不是当前操作的容器，则重置其样式
  • 用classList.toggle简化样式切换代码，替代原有的判断+增删操作
• 赋值逻辑：获取text变量后直接赋值给输入框的value属性，同时用trim()去除文本两端空格，保证内容整洁
• 容错处理：判断activeBox存在后再操作，避免因页面无激活状态元素而报错

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