创建表单输入的实时预览 [英] Create Live Preview of Form Input

问题描述

我正在尝试重新创建类似于 创建表单输入的实时预览

我正在尝试创建输入到各种表单输入(文本区域、单选按钮、下拉菜单、图像上传等)中的值的实时预览.

我已经尝试使用上述帖子中提供的代码片段，但它似乎根本不适合我.

/* 脚本 */<脚本>$(".import").keyup(function() {var $this = $(this);$('.' + $this.attr("id") + '').html($this.val());});/* html 输出 */<div id="预览"><div>输入4:<span class="acf-field_60734728ddf2f"></span></div>

/* 表单代码 */<div class="acf-field acf-field-text acf-field-60734728ddf2f is-required -r0";样式=宽度:50%；最小高度:98px;"数据名称=actor_name_first"；数据类型=文本"数据键=field_60734728ddf2f"；data-required=1"数据宽度=50"><div class="acf-label"><label for=acf-field_60734728ddf2f">名字<span class=acf-required">*</span></label></div><div class="acf-input"><div class="acf-input-wrap"><input type="text"id="acf-field_60734728ddf2f";类=导入导入"名称=acf[field_60734728ddf2f]"；required=required"></div>

我在控制台中收到 1 个错误:

TypeError: $ 不是函数.(在 '$(".import")' 中，'$' 未定义)

这是一个运行 Elementor 的 WordPress 网站，所以我想知道这是否存在某种冲突，我该如何解决?

解决方案

包含 jQuery 的 Wordpress 模板通常使用jQuery.noConflict() 所以尝试包装你所展示的jQuery(function($){/* 你的代码 */}) – @charlietfl

现在可以了，谢谢！

I'm trying to re-create something similar to Create live preview of form inputs

I am trying to create a live preview of values entered into various form inputs (text areas, radio buttons, dropdown menus, image uploads etc).

I've tried using the code snippet provided in the aforementioned post but it doesn't seem to be working for me at all.

    /* script */

            <script>
          $(".import").keyup(function() {
            var $this = $(this);
            $('.' + $this.attr("id") + '').html($this.val());
          });
    </script> 

/* html output */
    <div id="preview">
          <div>Input 4: <span class="acf-field_60734728ddf2f"></span></div>
    </div>

/* form code */
    
    <div class="acf-field acf-field-text acf-field-60734728ddf2f is-required -r0" style="width: 50%; min-height: 98px;" data-name="actor_name_first" data-type="text" data-key="field_60734728ddf2f" data-required="1" data-width="50">
      <div class="acf-label">
        <label for="acf-field_60734728ddf2f">First Name <span class="acf-required">*</span></label></div>
      <div class="acf-input">
        <div class="acf-input-wrap"><input type="text" id="acf-field_60734728ddf2f" class="import import" name="acf[field_60734728ddf2f]" required="required"></div>
      </div>
    </div>

I am getting 1 error in the console:

TypeError: $ is not a function. (In '$(".import")', '$' is undefined)

This is a WordPress website running Elementor so I wondered if it was some sort of conflict and how I would fix that?

解决方案

Wordpress templates that include jQuery usually use jQuery.noConflict() so try wrapping what you have shown in jQuery(function($){ /* your code */}) – @charlietfl

This now works, thank you!

<script>
jQuery(function($){
    $( document ).ready(function() {
        $(".import").keyup(function() {
        var $this = $(this);
        $("." + $this.attr("id") + "").html($this.val());
        });
     });
});
</script>

这篇关于创建表单输入的实时预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！