javascript - 我需要对 HTML 和 JavaScript 代码进行哪些更改才能使 character_count 正常工作？

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() 部分。这会跳过验证消息范围并获取字符计数的范围。这可以优化，但目前有效。您可以在示例窗口中实时尝试。