0

我在一个页面上有几个表单元素，其属性为 maxlength，并且希望有一个字符倒计时来提醒用户剩余的字符。我认为这会起作用，但每个计数器跨度都是空的。

这是元素的示例（所有其余的结构都相似）：

<label for="homeTagline">Tagline</label>
<input type="text" name="homeTagline" value="IT'S YOUR LIFE!" maxlength="24" class="maxed" />
<br>
<span class='emphasisTxt'><span class='cntr'></span> characters of 24 remaining</span>

这是我的jQuery

$('.maxed').each( function(){
   var ml = parseInt( $(this).attr('maxlength') );
   if( $(this).val().length() == 0){
      $(this).sibling('span.cntr').html(ml);
   } else {
      $(this).sibling('span.cntr').html(ml - $(this).val().length() );
   } // end if
});
4

4 回答 4

3

我看到三个问题：

  1. .length()on$(this).val().length()应该是.length. 它是 的属性String，而不是方法。

  2. jQuery 没有.sibling方法，它是.siblings, 复数形式。

  3. span.cntr不是该领域的兄弟姐妹，它实际上是一个 slibling 的孩子。所以你需要$(this).siblings('.emphasisTxt').find('span.cntr')选择它。

在 jsfiddle 上查看工作版本。

此外，您是否希望在编辑字段时更新跨度（不仅仅是在页面加载时）？您需要为此设置一个 keyup 侦听器。请澄清。

于 2012-05-22T19:16:35.227 回答
2

你的问题是siblings()-Bit。（你可能拼错了）。

siblings()只选择那些元素，它们是......嗯......兄弟姐妹。您的输入字段的兄弟姐妹是您的label,<br>和<span class="emphasisTxt">。与后一个内部一样，它不再span.cntr是.this

相反，$(this).siblings('span.emphasisTxt').children('span.cntr')应该施展魔法。

于 2012-05-22T19:19:47.360 回答
2

这是你想要完成的事情吗？

$('.maxed').each(function(){
   var ml     = parseInt( $(this).attr('maxlength') );
   var length = $(this).val().length;

   $(this).nextAll('span:first').find('.cntr').html(ml-length);      
}).keyup(function() {
    var ml     = parseInt( $(this).attr('maxlength') );
    var length = $(this).val().length;

    $(this).nextAll('span:first').find('.cntr').html(ml - length );
});

这是一个更新的jsFiddle 示例：http: //jsfiddle.net/RtHyX/4/

于 2012-05-22T19:34:21.377 回答
1

这是您最初问题的答案：http: //jsfiddle.net/kPYqq/您要寻找的不是兄弟姐妹，而是兄弟姐妹的孩子。长度是字符串的属性，而不是函数，因此请删除 ()。

我知道这并不能直接回答您的问题，但它可能是一个有用的选择。我之前在一个与您想要做的类似的网站上使用过这个 jquery 插件：http: //nooshu.com/jquery-plug-in-characters-left

于 2012-05-22T19:15:54.667 回答