Klasse hinzufügen, wenn bestimmte Anzahl erreicht wurde

Ich versuche eine Klasse hinzuzufügen und die Farbe des Textes zu ändern, wenn eine bestimmte Anzahl in einer Anzahl von Zeichen erreicht ist. Bitte helfen Sie mir herauszufinden, warum die Klasse nicht hinzugefügt wird und die Farbe ändert sich nicht.Klasse hinzufügen, wenn bestimmte Anzahl erreicht wurde

<body> 
    <form> 
     <div class="form-group"> 
      <label for="description">Description:</label> 
      <textarea class="form-control" id="description"></textarea> 
      <span id="char">0</span> characters 
     </div> 
    </form> 
    </body> 

<script> 
$('#description').keyup(function(){ 
    var maxLength = 155; 
    var length = $(this).val().length; 
    $('#char').text(length); 
    if(length > maxLength) { 
     $('char').addClass("warning") 
    } 
}); 
</script>

und in CSS, wäre Warnfarbe: rot

Dank!

Quelle

2017-04-13 Ben Thompson

Eine dieser etwas elegantere Art und Weise ändern toggleClass mit state zu verwenden, wäre zu tun, auf diese Weise Sie nicht tun brauche die extra if-Anweisung.

$('#description').keyup(function(){ 
 
    var maxLength = 155; 
 
    var length = $(this).val().length; 
 
    $('#char') 
 
     .text(length) 
 
     .toggleClass("warning", length > maxLength); 
 
});

.warning { 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="form-group"> 
 
     <label for="description">Description:</label> 
 
     <textarea class="form-control" id="description"></textarea> 
 
     <span id="char">0</span> characters 
 
    </div> 
 
</form>

Quelle

2017-04-13 03:17:59 Neil

Es ist nur ein kleiner Fehler. Aktualisieren Sie Ihren JavaScript-Code wie folgt.

$('#description').keyup(function(){ 
    var maxLength = 155; 
    var length = $(this).val().length; 
    $('#char').text(length); 
    if(length > maxLength) { 
     $('#char').addClass("warning"); 
    } else { 
     $('#char').removeClass("warning"); 
    } 
});

Es wird die Klasse "warning" hinzugefügt, sodass Sie CSS-Eigenschaften in dieser Klasse hinzufügen können, um die Farbe zu ändern.

Quelle

2017-04-13 03:02:41

Sie haben vergessen, # in den Selektor hinzuzufügen.

$('#description').keyup(function() { 
 
    var maxLength = 10; 
 
    var length = $(this).val().length; 
 
    $('#char').text(length); 
 
    if (length > maxLength) { 
 
    $('#char').addClass("warning") 
 
    } 
 
});

.warning { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="description">Description:</label> 
 
    <textarea class="form-control" id="description"></textarea> 
 
    <span id="char">0</span> characters 
 
</div>

Quelle

2017-04-13 03:05:18

Sie können die Farbe wie diese auch

<script> 
$('#description').keyup(function(){ 
    var maxLength = 155; 
    var length = $(this).val().length; 
    $('#char').text(length); 
    if(length > maxLength) { 
     $('#char').css("color", "red"); 
    } else { 
     $('#char').css("color", "black"); 
    } 
}); 
</script>

Quelle

2017-04-13 03:17:44

Klasse hinzufügen, wenn bestimmte Anzahl erreicht wurde

Antwort

Verwandte Themen