爲了讓我的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')。