为什么我的柜台无法像我期望的那样在现场工作

Question

我在我的应用程序中实现了一个JS计数器。 我有2个表单字段，我的两个不同的计数器应工作。 #post_title和#body-field 。

这是我的JS：

 counter = function() { var title_value = $('#post_title').val(); var body_value = $('#body-field').val(); if (title_value.length == 0) { $('#wordCountTitle').html(0); return; } if (body_value.length == 0) { $('#wordCountBody').html(0); return; } var regex = /\\s+/gi; var wordCountTitle = title_value.trim().replace(regex, ' ').split(' ').length; var wordCountBody = body_value.trim().replace(regex, ' ').split(' ').length; $('#wordCountTitle').html(wordCountTitle); $('#wordCountBody').html(wordCountBody); }; $(document).on('ready page:load', function () { $('#count').click(counter); $('#post_title, #body-field').on('change keydown keypress keyup blur focus', counter); });

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <label for="title">Title</label> <textarea id="post_title" placeholder="Enter Title"></textarea> <span id="wordCountTitle">0</span> words<br/> <label for="report">Report</label> <textarea id="body-field"placeholder="Provide all the facts." rows="4"> </textarea><br /> <span id="wordCountBody">0</span> / 150 words </body> </html>

看似流浪的$(document).ready(ready); 对应于我为简洁起见而在文件中较早调用的var ready = function() 。 但是我按顺序出现了document.ready()调用，以防万一它可能引起问题。

所以我遇到的问题是，每当您单击#post_title字段并输入单词时，计数器都不会更新。 但是，一旦我单击#body-field并开始输入，不仅#body-field的计数器开始工作并立即开始更新，而且#post_title的计数器#post_title开始工作并显示正确数量的单词那个领域。

是什么原因造成的？

编辑1

只是在玩那个代码片段时，我才意识到错误也存在于另一种状态。 如果您仅在输入标题之前先将文本添加到第二个字段（即#body-field ），则body-field的计数器不会增加。 仅在您开始在#post_title输入标题后#post_title 。 因此它们都以某种方式链接在一起。

Answer 1

您遇到的错误是由于这两个代码块

if (title_value.length == 0) {
    $('#wordCountTitle').html(0);
    return;
}

if (body_value.length == 0) {
    $('#wordCountBody').html(0);
    return;
}

这意味着为了使计数器运行，标题和正文都应具有一定的价值。 只需删除两者的return ，它就可以工作。

编辑

我认为同时删除两个if块也将为您提供所需的行为。 如果要同时拥有两个if块，则必须将标题和正文的计数器分开。

编辑2

这是计数器功能的更简单实现。

counter = function() {
  var title_value = $('#post_title').val();     
  var body_value = $('#body-field').val();

  $('#wordCountTitle').html(title_value.split(' ').length);
  $('#wordCountBody').html(body_value.split(' ').length);
}

Answer 2

您不应具有counter功能检查功能，并且不要在两个字段上都执行操作。 counter函数应该执行完全相同的操作，方法是利用jquery内部的this关键字，或者采用event参数并将其作为替代参数与event.target 。

这是重构：

var counter = function(event) {
    var fieldValue = $(this).val();
    var wc = fieldValue.trim().replace(regex, ' ').split(' ').length;
    var regex = /\s+/gi;
    var $wcField = $(this)[0] === $('#post_title')[0] ? $('#wordCountTitle') : $('#wordCountBody');

    if (fieldValue.length === 0) {
        $wcField.html('');
        return;
    }

    $wcField.html(wc);
};

$(document).on('ready page:load', function () {
    $('#post_title, #body-field').on('change keyup paste', counter);
});

JSBin游乐场

另外，我不确定是否在change keyup paste应该听这些文本区域上的这么多事件。

为什么我的柜台无法像我期望的那样在现场工作

问题描述

2 个解决方案

解决方案1
1 2015-02-03 04:51:30

解决方案2
1 已采纳 2015-02-03 04:58:51

为什么我的柜台无法像我期望的那样在现场工作

问题描述

2 个解决方案

解决方案1 1 2015-02-03 04:51:30

解决方案2 1 已采纳 2015-02-03 04:58:51

解决方案1
1 2015-02-03 04:51:30

解决方案2
1 已采纳 2015-02-03 04:58:51