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>个。向id="whatever"元素添加<input />属性，并将$('textarea')选择器更改为$('#whatever')。

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

2 个答案: