Question

我在一个属性为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
});

Answer 1

我看到三个问题：

.length()

$(this).val().length()应该是.length。它是String的属性，而不是方法。
jQuery没有.sibling方法，它是.siblings，复数形式。
span.cntr不是该领域的兄弟，它实际上是一个滑稽的孩子。因此，您需要$(this).siblings('.emphasisTxt').find('span.cntr')之类的内容来选择它。

查看working version on jsfiddle。

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

Answer 2

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

siblings()只选择那些......嗯......兄弟姐妹。输入字段的兄弟姐妹是您的label，<br>和<span class="emphasisTxt">。由于span.cntr in 后者，它不再是this的兄弟。

相反，$(this).siblings('span.emphasisTxt').children('span.cntr')应该发挥魔力。

Answer 3

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

$('.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/

Answer 4

以下是您最初问题的答案：http://jsfiddle.net/kPYqq/您所寻找的不是兄弟姐妹，而是兄弟姐妹的孩子。 Length是字符串的属性而不是函数，因此删除（）的。

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

jQuery - 使用maxlength迭代字段元素

4 个答案: