为什么我的计数器无法像我期望的那样在该领域工作 [英] Why does my counter not work in the field like I would expect
问题描述
我在我的应用中实现了一个JS计数器.我有2个表单字段，我的两个不同的计数器应该工作. #post_title和#body-field.
I have implemented a JS counter in my app. I have 2 form fields that my two different counters should work for. A #post_title and a #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()调用的顺序离开了它，以防它可能引起问题的出现.
The seemingly stray $(document).ready(ready); corresponds to a var ready = function() called earlier in the file that I left out for brevity purposes. But I left the document.ready() call in the order that it appears just incase it could be causing an issue.
所以我遇到的问题是，每当您单击#post_title字段并输入单词时计数器不会更新.但是，一旦我单击#body-field并开始键入，不仅#body-field的计数器开始工作并立即开始更新，而且#post_title的计数器也开始工作并在其中显示正确的单词数字段.
So the issue I am having is, whenever you click on the #post_title field and enter words the counter does not update. 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.
这可能是什么原因造成的?
What could be causing this?
编辑1
仅使用该代码段，我就意识到该错误也存在于另一种状态.如果您仅在输入标题之前先将文本添加到第二个字段(即#body-field)...主体字段的计数器将不会增加.只有在#post_title中开始输入标题后，它才会更新.因此它们都以某种方式链接在一起.
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 (i.e. the #body-field) before entering in the title...the counter for the body-field won't increment. It will only update AFTER you start entering a title in the #post_title. So they are both linked somehow.
推荐答案
您不应具有counter功能检查功能，并且不能在两个字段上都执行操作. counter函数应该执行完全相同的操作，方法是利用其中的jquery的this关键字，或者采用event参数并将其用作替代，并使用event.target.
You should not have the counter function check and perform operations on both fields. 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.
这里是重构:
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);
});
此外，我不确定我为什么要在change keyup paste上听这么多文本区域的事件.
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.
这篇关于为什么我的计数器无法像我期望的那样在该领域工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
