gpt4 book ai didi

javascript - 如何让我的 JavaScript 在网站上运行? (当前代码可以在 Fiddle 上运行,但不能在网站上运行)

转载 作者:行者123 更新时间:2023-12-03 04:23:05 27 4
gpt4 key购买 nike

我想为产品页面上的自定义字段创建字符计数器。我正在尝试使用以下 JavaScript 和 HTML 代码来实现这样的功能:

HTML:

<div class="fields-group-1">    

<table class="fields_table product-custom-text-wrapper" cellspacing="0">
<tbody>
<tr>
<td class="label"><label class=" product-custom-text-label" for="custom_text">Custom Text</label></td>
<td class="value">
<input type="text" class="field product-custom-text" name="custom_text" value="" placeholder="Enter Custom Text ..." maxlength="16" type="text" pattern="mandatory" mandatory="no" />
<span class="validation-message is-valid-1"></span>
</td>
</tr>
</tbody>
</table>


</div>

<span id="character_count"></span> //This is where I am attempting to output the Character Count.

JavaScript:

<script type="text/javascript"> 
$('.product-custom-text').keyup(updateCount);
$('.product-custom-text').keydown(updateCount);

function updateCount() {
var cs = $(this).val().length;
$('#character_count').text(cs);
}
</script>

当在 Fiddle 程序中运行它时,我可以生成字符计数器。但是,当我将上述代码放入网站时,字符计数器似乎不起作用。我已经检查了源代码,所有的编码都在那里。

我可以看到其他人也遇到了与我类似的问题,根据问题:Code works in fiddle, but not on webpage 。作为 JavaScript 的新手,我不能 100% 确定合适的修复方法。

有人能够为我指出正确的方向,即我需要进行相关更改才能使我的上述编码正常工作吗?

最佳答案

您可以像下面这样更改绑定(bind):

jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);

此绑定(bind)不需要位于 $( document ).ready(function() { 函数内,因为它将适用于可用的 DOM 元素

您需要使用 document.ready 进行 keyup 事件。在此之前,您在 jQuery 选择器中引用的 DOM 元素不可用。

jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);

function updateCount() {
var cs = $(this).val().length;
jQuery('#character_count').text(cs);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fields-group-1">

<table class="fields_table product-custom-text-wrapper" cellspacing="0">
<tbody>
<tr>
<td class="label"><label class=" product-custom-text-label" for="custom_text">Custom Text</label></td>
<td class="value">
<input type="text" class="field product-custom-text" name="custom_text" value="" placeholder="Enter Custom Text ..." maxlength="16" type="text" pattern="mandatory" mandatory="no" />
<span class="validation-message is-valid-1"></span>
</td>
</tr>
</tbody>
</table>


</div>

<span id="character_count"></span>

编辑:根据讨论,在 WordPress 网站中,可能存在 $ 冲突的可能性,因此请尝试使用 jQuery 代替 $。更新了答案!

关于javascript - 如何让我的 JavaScript 在网站上运行? (当前代码可以在 Fiddle 上运行,但不能在网站上运行),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43858155/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com