创建表单输入的实时预览

Question

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

我正在尝试创建一个实时预览值输入到各种形式的输入(文本区域，单选按钮，下拉菜单，图像上传等)。

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

/* 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>

我在控制台得到1个错误:

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

这是一个WordPress网站运行元素，所以我想知道如果它是某种冲突，我将如何解决这个问题?

Answer 1

您可以在香草javascript中这样做:

const paragraph = document.querySelector('p');
const input = document.querySelector('.input');
input.addEventListener('input', (event) => {
paragraph.innerHTML = event.target.value;
});

<input class='input' type='text'>
<p></p>

Answer 2

//it is necessary to check that jquery 
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
//was called earlier
<script>
//and put in document ready
$( document ).ready(function() {
$(".import").keyup(function() {
var $this = $(this);
$('.' + $this.attr("id") + '').html($this.val());
});
});        
</script>

Answer 3

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

现在可以工作了，谢谢!

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