jquery don't want add class without point-CodePudding

Jquery don't want add class without point.

Here's the html code:

<div  id="plis">
    <select  aria-label="Default select example">
      <option selected>Choisissez</option>
      <option value="1">1 km</option>
      <option value="2">2 km</option>
      <option value="3">5 km</option>
      <option value="3">10 km</option>
      <option value="3">20km</option>
    </select>
    <label  for="spassword">Carburant</label>
    <div  id="distance"></div>
</div>

I want to transform this :

<div  id="plis">...

To this :

<div  id="plis">...

First try with this Jquey code:

    $( "select" ).change(function() {
        if ($(this).val() == 'Choisissez') {
            $('div#plis').addClass('.has-error has-danger');
            $("div#distance").append("<ul class='list-unstyled' style='margin-top: 0.375rem;'><li>Its works</li></ul>");
        }
    });

the result :

<div  id="plis">...

Where is the "has-danger" ?

Second try:

    $( "select" ).change(function() {
        if ($(this).val() == 'Choisissez') {
            $('div#plis').addClass('has-error has-danger');
            $("div#distance").append("<ul class='list-unstyled' style='margin-top: 0.375rem;'><li>Its works</li></ul>");
        }
    });

the result :

<div  id="plis">...

Why nothing happend ?

Third try:

    $( "select" ).change(function() {
        if ($(this).val() == 'Choisissez') {
            $('div#plis').addClass('has-error .has-danger');
            $("div#distance").append("<ul class='list-unstyled' style='margin-top: 0.375rem;'><li>Its works</li></ul>");
        }
    });

the result :

<div  id="plis">...

Where is the "has-error" ?

Fourth try:

    $( "select" ).change(function() {
        if ($(this).val() == 'Choisissez') {
            $('div#plis').addClass('.has-error .has-danger');
            $("div#distance").append("<ul class='list-unstyled' style='margin-top: 0.375rem;'><li>Its works</li></ul>");
        }
    });

the result :

<div  id="plis">...

Why Jquery dont want to add class without a point ?

How can I do ?

Thanks a lot !

CodePudding user response：

From the jQuery documentation of addClass, you only add the class names you want to add, separated by a space. You don't need to specify the "dot" as it's a class selector.

$('div#plis').addClass('has-error has-danger');

CodePudding user response：

it works if you just make that addClass('has-error has-danger') (i.e. no dots, classes seperated by space):

$("select").change(function() {
  if ($(this).val() == 'Choisissez') {
    $('div#plis').addClass('has-error has-danger');
    $("div#distance").append("<ul class='list-unstyled' style='margin-top: 0.375rem;'><li>It works</li></ul>");
  }
});

.has-error {
  border: 3px solid red;
}
.has-danger {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="plis">
  <select  aria-label="Default select example">
    <option selected>Choisissez</option>
    <option value="1">1 km</option>
    <option value="2">2 km</option>
    <option value="3">5 km</option>
    <option value="3">10 km</option>
    <option value="3">20km</option>
  </select>
  <label  for="spassword">Carburant</label>
  <div  id="distance"></div>
</div>

CodePudding user response：

Did You try ?

$('.form-group#plis').addClass('has-error').addClass('has-danger');

or just:

$('#plis').addClass('has-error').addClass('has-danger');

or:

$("#my_id").prop("class", "my_new_class_name");