jQuery动态赋值输入框的技巧分享

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《jQuery动态赋值输入框的实用方法》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

本文详细介绍了如何利用jQuery的`val()`方法，将JavaScript变量中的数据动态地设置到HTML `<input>` 元素的 `value` 属性中。通过具体的代码示例，演示了在事件监听器内部获取变量并精确选中目标输入框进行赋值的操作，旨在提供一个高效且可维护的解决方案，适用于需要根据用户交互或其他逻辑更新表单字段的场景。

在现代Web开发中，动态更新表单元素的值是一个非常常见的需求。例如，用户点击某个按钮后，我们需要将页面上的某个文本内容填充到输入框中，以便用户进行编辑。本教程将重点讲解如何利用流行的JavaScript库jQuery来实现这一功能，特别是如何将一个JavaScript变量的值赋给HTML <input type="text"> 元素。

核心概念：jQuery的val()方法

jQuery提供了一个名为val()的便捷方法，用于获取或设置表单元素（如<input>, <select>, <textarea>)的值。

• 当不带参数调用val()时，它返回匹配元素当前的value属性值。
• 当带参数调用val(newValue)时，它会将匹配元素的value属性设置为newValue。

实践：将变量值赋给输入框

假设我们有一个HTML结构，其中包含一个按钮和一个文本输入框，我们希望在点击按钮时，将某个动态获取的文本内容填充到输入框中。

HTML 结构示例：

<div class="swiper-slide">
    <i class="button fa-regular fa-pen-to-square" id="update_pen"></i>
    <div class="services-item mb-40 elementor-repeater-item-78d8e80" id="swiper-slide-one">
        <div class="services-item__content">
            <h4 class="services-item__tp-title mb-30" id="h_foor">
                <a href="service-details.html">BIOCHIMIE</a>
            </h4>
            <div class="text_area_box" id="text_area_box">
                &lt;input type=&quot;text&quot; name=&quot;serviceTitle&quot; required=&quot;&quot; value=&quot;&quot;&gt; <!-- 目标输入框 -->
                <label>Titre</label>
            </div>
        </div>
    </div>
</div>

在这个结构中，我们的目标是将标签内的文本内容（例如"BIOCHIMIE"）赋值给name="serviceTitle"的输入框。

JavaScript (jQuery) 实现：

首先，确保你的页面已经引入了jQuery库。然后，在你的JavaScript代码中，你可以在事件监听器内部完成赋值操作。

// 确保DOM加载完毕后再执行
$(document).ready(function() {
    // 为所有带有'button'类的<i>标签添加点击事件监听器
    $('i.button').on('click', function(e) {
        // 获取当前点击按钮的最近的父级 '.swiper-slide' 元素
        const parentSlide = $(this).closest('.swiper-slide');

        // 从父级元素中找到 <a> 标签并获取其文本内容
        // 这个文本内容就是我们要赋给输入框的变量
        const textToAssign = parentSlide.find('a').text(); 

        // 找到目标输入框并为其赋值
        // 使用 .find() 方法在 parentSlide 内部查找具有特定选择器的输入框
        parentSlide.find('.text_area_box input[type="text"]').val(textToAssign);

        // 以下是原始代码中处理类名切换的部分，与赋值操作无关，但保留以供参考
        // var element = parentSlide.find(".text_area_box"); // 假设 .text_area_box 是唯一的
        // var elementactive = $(".text_area_box_active"); // 注意这里可能是全局查找，需要根据实际逻辑调整

        // if (element.hasClass('text_area_box')) {
        //     element.removeClass('text_area_box').addClass('text_area_box_active');
        // } else if (elementactive.hasClass('text_area_box_active')) {
        //     elementactive.removeClass('text_area_box_active').addClass('text_area_box');
        // }
    });
});

代码解析：

1. $(document).ready(function() { ... });: 这是一个jQuery的最佳实践，确保所有DOM元素都已加载并可操作后再执行JavaScript代码。
2. $('i.button').on('click', function(e) { ... });: 这是一个事件委托的例子，它为所有匹配i.button选择器的元素绑定了一个点击事件监听器。this在事件处理函数中指向被点击的元素。
3. const parentSlide = $(this).closest('.swiper-slide');:
   • $(this) 将原生的DOM元素this（即被点击的标签）包装成一个jQuery对象。
   • .closest('.swiper-slide') 方法从当前元素开始，向上遍历DOM树，直到找到第一个匹配.swiper-slide选择器的祖先元素。这确保我们找到的是与当前点击按钮相关的父级幻灯片容器。
4. const textToAssign = parentSlide.find('a').text();:
   • parentSlide.find('a') 在parentSlide这个jQuery对象内部查找所有标签。find()方法是向下遍历子孙元素。
   • .text() 方法获取匹配元素及其所有子元素的合并文本内容。
   • textToAssign 变量现在存储了标签内的文本，例如"BIOCHIMIE"。
5. parentSlide.find('.text_area_box input[type="text"]').val(textToAssign);:
   • parentSlide.find('.text_area_box input[type="text"]') 在parentSlide内部精确查找目标输入框。这里我们使用了组合选择器：先找到类名为text_area_box的元素，再在其内部找到type="text"的<input>元素。这种方式确保了我们只操作当前幻灯片内的输入框，而不是页面上所有匹配的输入框。
   • .val(textToAssign) 将textToAssign变量的值赋给选中的输入框。

注意事项与最佳实践

• 确保jQuery已加载： 在使用任何jQuery功能之前，请务必在HTML中引入jQuery库。通常放在标签的底部，或标签内但使用defer属性。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

• 选择器精度： 使用尽可能精确的选择器来定位目标元素。在上述示例中，parentSlide.find('.text_area_box input[type="text"]') 比简单的$('input[type="text"]') 更具针对性，避免了意外修改其他不相关的输入框。
• DOM加载时机： 始终将操作DOM的代码放在$(document).ready()或等效的事件监听器中，以确保在脚本尝试操作元素时，这些元素已经存在于页面上。
• Vanilla JavaScript 替代方案： 如果项目不使用jQuery，也可以使用原生JavaScript实现相同的功能：

  document.querySelectorAll('i.button').forEach(el => {
      el.addEventListener('click', e => {
          const parentSlide = e.target.closest('.swiper-slide');
          const textToAssign = parentSlide.querySelector('a').textContent;
          parentSlide.querySelector('.text_area_box input[type="text"]').value = textToAssign;
          // ... 其他原生JS逻辑 ...
      });
  });

  原生JavaScript使用querySelector()或querySelectorAll()来选择元素，并通过.value属性来设置输入框的值。

总结

通过本教程，我们学习了如何利用jQuery的val()方法，结合精确的DOM遍历和选择器，将JavaScript变量的值动态地设置到HTML输入框中。这种技术是构建交互式和响应式Web应用的基础。掌握它将使你能够更有效地处理用户输入和页面内容的动态更新。在实际开发中，根据项目的具体需求和是否引入jQuery，选择合适的DOM操作方式至关重要。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~