Javascript 当字符长度小于特定数字时，jQuery更改html类_Javascript_Html_Jquery

Javascript 当字符长度小于特定数字时，jQuery更改html类

javascript html jquery

Javascript 当字符长度小于特定数字时，jQuery更改html类,javascript,html,jquery,Javascript,Html,Jquery,当我在文本区域中输入内容时，我生成了一个jQuery代码段，这是由textarea HTML输入设置的限制但我想做的是，当我输入这么多字符（带空格）时，当字符限制降低到…25时，使span类发生变化这是我制定的代码 var maxLength = 280; $('#tweetassistmessage').keyup(function() { var length = $(this).val().length; var length = maxLength-length; $('

当我在文本区域中输入内容时，我生成了一个jQuery代码段，这是由textarea HTML输入设置的限制

但我想做的是，当我输入这么多字符（带空格）时，当字符限制降低到…25时，使span类发生变化

这是我制定的代码

var maxLength = 280;
$('#tweetassistmessage').keyup(function() {
  var length = $(this).val().length;
  var length = maxLength-length;
  $('#charcterCount1').text(length);


  if  ($('#charcterCount1').text(length) < 25 ){
   $("#charcterCount1").replaceWith( "<span class=\"ui yellow circular label\" id=\"charcterCount1\"></span>" );
  } else if  ($('#charcterCount1').text(length) < 10 ){
   $("#charcterCount1").replaceWith( "<span class=\"ui red circular label\" id=\"charcterCount1\"></span>" );
  }

});

var maxLength=280；
$（'#tweetassistmessage'）.keyup（函数（）{
var length=$（this）.val（）.length；
变量长度=最大长度；
$（'#charactercount1'）。文本（长度）；
如果（$（'#CharacterCount1'）。文本（长度）<25）{
$（“#CharacterCount1”）。替换为（“”）；
}else if（$（'#CharacterCount1'）。文本（长度）<10）{
$（“#CharacterCount1”）。替换为（“”）；
}
});

我试过了，当我输入一些文本时，span类没有改变。知道我遗漏了什么吗？

JQuery的

$（选择器）。text（arg）

将元素的文本设置为arg变量，并且不返回任何内容。要计算文本长度，请使用返回值

$（选择器）.text（）

此外，您必须确保在替换

字符计数1

后，确保填充它的文本（我将

$（'#字符计数1'）。文本（长度）；

移到底部）

此外，characterCount1需要有初始值，因为

如果（$（'#characterCount1'）。text（）<25）{

如果characterCount1包含空字符串，则返回true

另外，当长度减少时，您需要确保删除黄色/红色类

此外，您需要确保首先进行最小数检查（在示例代码中，红色类永远不会被触发）

var maxLength=280；
$（'#tweetassistmessage'）.keyup（函数（）{
var length=$（this）.val（）.length；
变量长度=最大长度；
如果（长度==0）{
$（“#charactercount1”）。替换为（“太多”）；
}否则，如果（长度<10）{
$（“#CharacterCount1”）。替换为（“”）；
}否则，如果（长度<25）{
$（“#CharacterCount1”）。替换为（“”）；
}else if（长度<最大长度）{
$（“#CharacterCount1”）。替换为（“”）；
} 
如果（长度！=0）$（'#charactercount1'）。文本（长度）；
})；

.yellow{
背景颜色：黄色；
}
瑞德先生{
背景色：红色；
}

请尝试下面的代码

<html>
    <head>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    

    <style>
        .yellow{
            background-color: rgb(220, 235, 14);
        }
        .red{
            background-color: rgb(235, 58, 14);
        }
    </style>
    </head>
    <body> 
   


        <form id="form1">
            <h1>Form 1</h1>
            <div><textarea maxlength="280" type="text" name="tweetassistmessage" id="tweetassistmessage" placeholder="field1"></textarea></div>
            <span class=" label" id="charcterCount1"></span>
        </form>
        <script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script> 

  
    <script type="text/javascript">
    
    var maxLength = 280;
    $('#tweetassistmessage').keyup(function() {
         var length = $(this).val().length;
        var length = maxLength-length; 
        $('#charcterCount1').text(length);


        if  ($('#charcterCount1').text() < 25 && $('#charcterCount1').text()>10 ){
            $("#charcterCount1").replaceWith( "<span class=\"ui yellow circular label\" id=\"charcterCount1\">"+length+"</span>" );
        } else if  ($('#charcterCount1').text() < 10 ){
            $("#charcterCount1").replaceWith( "<span class=\"ui red circular label\" id=\"charcterCount1\">"+length+"</span>" );
        } 
    });
    </script>
</body>
</html>


黄先生{
背景色：rgb（220、235、14）；
}
瑞德先生{
背景色：rgb（235,58,14）；
}
表格一
var maxLength=280；
$（'#tweetassistmessage'）.keyup（函数（）{
var length=$（this）.val（）.length；
变量长度=最大长度；
$（'#charactercount1'）。文本（长度）；
如果（$（'#charactercount1'）.text（）<25&$（'#charactercount1'）.text（）>10）{
$（“#charactercount1”）。替换为（“+length+”）；
}else if（$（'#charactercount1'）.text（）<10）{
$（“#charactercount1”）。替换为（“+length+”）；
} 
});

还请注意，条件应如下所示。否则，如果小于10，它将始终处于第一个条件事件中。

如果（$（'#charactercount1'）.text（）<25&$（'#charactercount1'）.text（）>10{

我建议您不用替换完整的span代码，只需

.addClass（）

和

.removeClass（）

即可


var maxLength=280；
$（'#tweetassistmessage'）.keyup（函数（）{
var length=$（this）.val（）.length；
变量长度=最大长度；
$（'#characterCount1'）。文本（长度）
变量限制=$（'#charactercount1'）。text（）；
如果（限值<25&&限值>10）{
$（“#CharacterCount1”）.removeClass（“红色”）.addClass（“ui黄色圆形标签”）；
}else if（$（'#charactercount1'）.text（）<10）{
$（“#characterCount1”）.removeClass（“黄色”）.addClass（“红色”）；
}
});

首先声明一次

变量长度

，并在您的检查条件中使用它

另外，防止包装跨度，只需使用

addClass

removeClass

添加红色和黄色类

条件首先应检查数字是否低于黄色定义的数字，是否高于红色定义的数字，依此类推，否则删除这两个类

  if (length > redWarningLength && length <= yellowWarningLength) {
    $("#charcterCount1").removeClass("red").addClass("yellow");
  } else if (length < redWarningLength) {
    $("#charcterCount1").removeClass("yellow").addClass("red");
  } else {
    $("#charcterCount1").removeClass("red yellow");
  }

好的，如果我添加更多颜色呢？我是否继续添加

else if（$（'charactercount1'）.text（）<25）{$（'charactercount1'）。替换为（“”；}

？例如，如果我小于100、50、25、10，或者当它等于零时（我添加了另一个操作）@mikey186是的，如果是这样的话，你可以添加更多。好吧，我试过了，但不幸的是，当它从100降到100时，它就变成了绿色。这是我在链接@mikey186上的代码，首先是最小的数字（0，然后是10，然后是25，然后是50，然后是100）。如果你这样做，那么你必须将实数（0）保存在某个变量中（不是html文本）@mikey186还添加了检查限制，并防止在限制后键入额外文本：）检查应答

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
var maxLength = 280;
$('#tweetassistmessage').keyup(function() {
   var length = $(this).val().length;
   var length = maxLength-length;
   $('#charcterCount1').text(length)
 var limit = $('#charcterCount1').text();
  if  ( limit < 25 && limit > 10){
   $("#charcterCount1").removeClass("red").addClass( "ui yellow circular label" );
  } else if  ($('#charcterCount1').text() < 10 ){
   $("#charcterCount1").removeClass("yellow").addClass("red");
  }

});

</script>

  if (length > redWarningLength && length <= yellowWarningLength) {
    $("#charcterCount1").removeClass("red").addClass("yellow");
  } else if (length < redWarningLength) {
    $("#charcterCount1").removeClass("yellow").addClass("red");
  } else {
    $("#charcterCount1").removeClass("red yellow");
  }