为什么我的计数器不像我期望的那样在现场工作

我在我的应用程序中实现了一个JS计数器。 我有两个表单字段，我的两个不同的计数器应该工作。 #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); }); 

      Title  0 words
 Report  
 0 / 150 words   

看似流浪的$(document).ready(ready); 对应于我之前在文件中调用的var ready = function() ，为了简洁起见我省略了。 但是我按照它出现的顺序离开了document.ready()调用，只是因为它可能导致问题。

所以我遇到的问题是，无论何时单击#post_title字段并输入单词，计数器都不会更新。 但是只要我点击#body-field并开始输入， #body-field的计数器就会立即工作并立即开始更新，但#post_title的计数器#post_title开始工作并显示正确的单词数量那个领域。

可能是什么导致了这个？

编辑1

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

Answer 1

您不应该检查counterfunction并对这两个字段执行操作。 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游乐场

此外，我不完全确定为什么你在那些textareas上听那么多事件，当change keyup paste应该这样做。

Answer 2

你遇到的错误是因为这两个代码块

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

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

编辑

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

编辑2

这里是一个更简单的计数器function实现。

 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); }