0

簡単なコメントフォームがあります。char-counterを入れました。新しいコメントを作成すると、すべて正常に機能します。コメントを編集しようとすると、char-counterが機能しません。Live（）を試してみましたが、結果は同じです。編集ページの他のJは正常に機能し、このキーアップ機能だけが機能します。キーアップが機能するかどうかを確認するためにアラートを出そうとしましたが、応答がありませんでした。これが私のコードです：

  • html

        <?php echo form_tag_for($form, '@comments',array('class' => 'nice'));?>

        <?php echo $form->renderHiddenFields() ?>
        <?php echo $form->renderGlobalErrors() ?>
        <?php echo $form['_csrf_token']; ?>
        <input type="hidden" name="comments[users_id]" id="comments_users_id" value="1" />
        <input type="hidden" name="comments[tests_id]" id="comments_users_id" value="<?php echo $testId?>" />


        <?php echo $form['comment']->renderError() ?>

          <div class="count">remaining symbols : 250</div>
          <div class="barbox"><div class="bar"></div></div>

        <?php echo $form['comment']->render(array('class' => 'comments_comment')) ?>

        <?php  echo $form['captcha']->renderLabel(null,array('class' => 'label-login-down ')) ?>
        <?php echo $form['captcha']->renderError() ?>
        <?php echo $form['captcha']->render(array('class' => 'normal  input-text ' , 'placeholder'=>"Въведете символите")) ?>

        <input type="submit" name="addComment" value="Изпрати" />          
    </form>

  • jquery

    $(".comments_comment").keyup(function()
{       
  var box=$(this).val();
  var main = box.length *100;
  var value= (main / 250);
  var count= 250 - box.length;

  if(box.length <= 250)
  { 
    if(box.length <=210)
    {
     $('.count').html('remaining symbols : '+count);            
    }
    else
    {          
   $('.count').html('<div class="commentAlertSymbols">remaining symbols :    '+count+'</div>'); 
    }
  $('.bar').animate(
  {
  "width": value+'%',
  }, 1);

}
else
{
  $('.count').html('<div class="commentRedSymbols">remaining symbols : '+count+'</div>');
}
return false;
});
4

1 に答える 1

0

これらすべてのPHPヘルパー関数ではなく、実際のフォームのHTML出力を確認できればよかったのですが、試してみます。

$('.comments_comment').keyup(function() {
    // Get the number of characters, percent used, and number left
    var $count = $('.count');
    var chars = $(this).val().length;
    var percent = (chars / 250) * 100;
    var left = 250 - chars;

    // Update the counter
    $count.html('Remaining Symbols: ' + left);

    // Add classes based on how many are left
    if (chars > 210 && chars <= 250) {
        $count.addClass('commentAlertSymbols');
    } else if (chars > 250) {
        $count.addClass('commentRedSymbols');
    }

    // Animate the bar
    $('.bar').css({
        width: chars <= 250 ? percent + '%' : '100%'
    });
});

コードをもっとDRYにしました。また、1秒以上何かをアニメートする意味がわからなかったので、$('.bar').animate行をに変更しました。$('.bar').css

動作しているJSFiddleはhttp://jsfiddle.net/KjTrj/で確認できます。

于 2012-06-06T13:16:18.933 に答える