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

Question

I have implemented a JS counter in my app. 我在我的应用程序中实现了一个JS计数器。 I have 2 form fields that my two different counters should work for. 我有2个表单字段，我的两个不同的计数器应工作。 A #post_title and a #body-field . #post_title和#body-field 。

This is my JS: 这是我的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>

The seemingly stray $(document).ready(ready); 看似流浪的$(document).ready(ready); corresponds to a var ready = function() called earlier in the file that I left out for brevity purposes. 对应于我为简洁起见而在文件中较早调用的var ready = function() 。 But I left the document.ready() call in the order that it appears just incase it could be causing an issue. 但是我按顺序出现了document.ready()调用，以防万一它可能引起问题。

So the issue I am having is, whenever you click on the #post_title field and enter words the counter does not update. 所以我遇到的问题是，每当您单击#post_title字段并输入单词时，计数器都不会更新。 But as soon as I click on the #body-field and start typing not only does the counter for the #body-field work and start updating immediately, but the counter for the #post_title starts working too and shows the correct amount of words in that field. 但是，一旦我单击#body-field并开始输入，不仅#body-field的计数器开始工作并立即开始更新，而且#post_title的计数器#post_title开始工作并显示正确数量的单词那个领域。

What could be causing this? 是什么原因造成的？

Edit 1 编辑1

Just playing with that code snippet I realized that the error exists in another state too. 只是在玩那个代码片段时，我才意识到错误也存在于另一种状态。 If you just add text to the 2nd field first (ie the #body-field ) before entering in the title...the counter for the body-field won't increment. 如果您仅在输入标题之前先将文本添加到第二个字段（即#body-field ），则body-field的计数器不会增加。 It will only update AFTER you start entering a title in the #post_title . 仅在您开始在#post_title输入标题后#post_title 。 So they are both linked somehow. 因此它们都以某种方式链接在一起。

Answer 1

the error you're having is because of these 2 blocks of code 您遇到的错误是由于这两个代码块

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

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

This means that in order for the counters to run, both title and body should have some value. 这意味着为了使计数器运行，标题和正文都应具有一定的价值。 Just remove the return on both and it should work. 只需删除两者的return ，它就可以工作。

EDIT 编辑

I think removing both if blocks will also give you the same behavior you want. 我认为同时删除两个if块也将为您提供所需的行为。 If you want to have both if blocks, you'll have to separate the counter for the title and body. 如果要同时拥有两个if块，则必须将标题和正文的计数器分开。

EDIT 2 编辑2

here's a simpler implementation of counter 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);
}

Answer 2

You should not have the counter function check and perform operations on both fields. 您不应具有counter功能检查功能，并且不要在两个字段上都执行操作。 The counter function should do exactly the same operation, by utilizing jquery's this keyword inside it, or by taking an event parameter and using that as an alternative, with event.target . counter函数应该执行完全相同的操作，方法是利用jquery内部的this关键字，或者采用event参数并将其作为替代参数与event.target 。

Here's the refactor: 这是重构：

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 playground JSBin游乐场

Also, I am not entirely sure why you are listening to that many events on those textareas, when change keyup paste ought to do it. 另外，我不确定是否在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