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

3つの問題があります。

  1. .length()on$(this).val().length()はであるはず.lengthです。これはのプロパティでStringあり、メソッドではありません。

  2. jQueryには.siblingメソッドがありません.siblings。複数形です。

  3. span.cntrフィールドの兄弟ではなく、実際にはスリブリングの子です。だからあなたはそれ$(this).siblings('.emphasisTxt').find('span.cntr')を選択するようなものが必要です。

jsfiddleの動作バージョンを参照してください。

また、フィールドが編集されたときに（ページの読み込み時だけでなく）スパンを更新しますか？そのためにキーアップリスナーを設定する必要があります。どうか明らかにしてください。

于 2012-05-22T19:16:35.227 に答える
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 に答える
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 に答える
1

最初の問題に対する答えは次のとおりです。http：//jsfiddle.net/kPYqq/探していたのは兄弟ではなく、兄弟の子でした​​。長さは文字列のプロパティであり、関数ではないため、（）を削除してください。

私はこれがあなたの問題に直接答えないことを知っていますが、それは有用な代替案かもしれません。私は以前、あなたが探しているのと同じようなことをするサイトでこのjqueryプラグインを使用しました：http： //nooshu.com/jquery-plug-in-characters-left

于 2012-05-22T19:15:54.667 に答える