Question

目前，在我的网站上，我的字符数是我的一个文本区域。这样他们就知道他们输入了多少个字符，这样他们就知道他们剩下多少个字符。

我现在意识到的是，它应该真的是倒数到最小字符数，当它们达到最大值时，它应该输出太多的数量。

我不确定如何解决这个问题。这就是我现在所拥有的，我只是计算长度。

$('textarea[name="book_summary"]').keyup(function(){
  if($(this).val().length < 250){
    $('.bookChar').html('<span style="color:green;">You have ' + $(this).val().length +' characters to go!</span>');
  }else if($(this).val().length >= 250){
    $('.bookChar').html('');
  }else if($(this).val().length >= 800){
    $('.bookChar').html('<span style="color:red;">You have ' + $(this).val().length +' too much!</span>');
  }
 });

是否有可能倒数到250，然后超过800？一个jsFiddle http://jsfiddle.net/JWWfY/7/

而且我知道不建议在一个范围内有一个跨度，但我只是想让它工作，然后我会回去清理它。

Answer 1

首先，没有必要重新获得3次长度。那是浪费的开销。

其次，你的角色数量显示的是文本的实际长度，而不是剩下的东西（或超出限制的范围）。

要解决您的实际问题，您需要将>=800包含在>=250比较中，否则其中一个或另一个将永远不会执行。

$('textarea[name="book_summary"]').keyup(function(){
  var len = $(this).val().length;
  if ( len < 250 ){
    $('.bookChar').html('<span style="color:green;">You have ' + (250-len) +' characters to go!</span>');
  } else if( len >= 250 ){
      if ( len >= 800 ){
          $('.bookChar').html('<span style="color:red;">You have ' + (len-800) + ' too much!</span>');
      } else {
          $('.bookChar').html('');
      }
  }
});

Answer 2

如果你把事情分开一点，那就更清楚了，你不需要所有的if语句，这使得阅读和理解都变得更加困难。这将做你所描述的......

$('textarea[name="book_summary"]').keyup(function() {
    var len = $(this).val().length;
    var html = "";

    if (len < 250) {
        html = '<span style="color:green;">You have ' + (250 - len) +' characters to go!</span>';
    } else if (len > 800) {
        html = '<span style="color:red;">You have ' + (len - 800) +' too much!</span>';
    }

    $(".bookChar").html(html);
});

Answer 3

您需要检查下限阈值和上限阈值，并且可以从一个变量重新使用长度。

我还修复了提交检查，以确保检查800个或更少的字符。

我喜欢简单的事情，所以，如果，在这种情况下，否则就足够了。

jsFiddle

$('.button').on('click', function(){
  var len = $('textarea[name="book_summary"]').val().length    
  if (len < 250){
    $('.bookError').html('This field must have at least 250 characters.');
  }else if(len > 800){
      $('.bookError').html('This field cannot have more than 800 characters.');
  } else {
      $('.bookError').html('');
  }
});

    $('textarea[name="book_summary"]').keyup(function(){ 
        var len = $(this).val().length;
        if(len < 250){
            $('.bookChar').html('<span style="color:green;">You have ' + (250 - len) +' characters to go!</span>');
        }else if(len > 800){
            $('.bookChar').html('<span style="color:red;">You have ' + (len - 800) +' too much!</span>');
        } else{
            $('.bookChar').html('');
        }
    });

Answer 4

坚持使用相同的格式。在您的示例中，如果文本的长度超过250个字符，则以下内容始终为真else if($(this).val().length >= 250)，因此它永远不会到达您的最后一个if语句。

我修改了所有三个if语句，以匹配您在问题中寻找的内容。

$('textarea[name="book_summary"]').keyup(function(){
            if($(this).val().length < 250){
                $('.bookChar').html('<span style="color:green;">You have ' + (250-$(this).val().length) +' characters to go!</span>');
            }else if($(this).val().length >= 250 && $(this).val().length <= 800){
                $('.bookChar').html('');
            }else if($(this).val().length > 800){
                $('.bookChar').html('<span style="color:red;">You have ' + ($(this).val().length-800) +' too much!</span>');
            }
        });

示例：

http://jsfiddle.net/trevordowdle/JWWfY/9/

更新（更清洁/更高效）：

$('textarea[name="book_summary"]').keyup(function(){
        var len = $(this).val().length;
        if(len < 250)
            $('.bookChar').html('<span style="color:green;">You have ' + (250-len) +' characters to go!</span>');
        else if(len > 800)
            $('.bookChar').html('<span style="color:red;">You have ' + (len-800) +' too much!</span>');
        else
            $('.bookChar').html('');
    });

jQuery倒数至250个字符

4 个答案: