为了让我的character_count正常工作，我需要对HTML和JavaScript代码进行哪些更改？

Question

我目前正在使用WooCommerce功能在WordPress网站上工作。

我的一项任务是在产品页面上插入一个自定义文本字段，购物者可以在其中指定一段文字，他们希望在他们的产品上看到。为了加速这个过程，我使用了一个插件。产生这种自定义字段，插件输出的产品页面下面的代码：

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> 

我现在要输出的字符数到产品页面。浏览网后，我可以看到下面的代码将在这方面帮助：

的JavaScript

$('textarea').keyup(updateCount); 
$('textarea').keydown(updateCount); 

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

目前，该代码不起作用。使用上面的HTML，是否有人知道我需要将JavaScript代码中的'textarea'更改为，以便此代码正常工作？

一旦我得到了代码工作，我可以简单地输入<span id="character_count"></span>代码完成。

Answer 1

您的jQuery选择器$('textarea')不正确，因为您的HTML中没有textarea。它看起来像你想用$('.product-custom-text')来代替。当然，最好使用ID而不是类来为您的输入标签添加ID。

jQuery的选择器与CSS相同。所以如果你想精确地选择一个元素，使用它的ID。

您的代码就变成了：

$('.product-custom-text').keyup(updateCount); 
$('.product-custom-text').keydown(updateCount); 

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

编辑：

要包含的字符数只在具有文本框中的产品，我将其包括在表的同一范围和使用CSS正确定位。

例如：

$('.product-custom-text').keyup(updateCount); 
 
$('.product-custom-text').keydown(updateCount); 
 

 
function updateCount() { 
 
    var cs = $(this).val().length; 
 
    $(this).next().next().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> 
 
        <span id="character_count"></span> 
 
       </td> 
 
      </tr> 
 
<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> 
 
        <span id="character_count"></span> 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 

 
</div>

此更新违背了我对想用ID来选择，在这种情况下，我们的蚂蚁通过类作为上有多种产品选择前半部分同一页。

请注意代码的.next().next()部分。这会跳过验证消息范围并获取字符数量的范围。这可以进行优化，但现在起作用。您可以在示例窗口中尝试它。

Answer 2

您没有任何网页上的<textarea> s。将id="whatever"属性添加到<input />元素，并将$('textarea')选择器更改为$('#whatever')。