JQuery не удаляет класс

Question

У меня проблемы, когда я пытаюсь УДАЛИТЬ класс только при нажатии на тег.Добавление класса работает отлично, но removeClass () не имеет в моем html:

            <div class="row">
                <div class="col-sm-2">
                    <h4>Ambiente</h4>
                    <ul>
                        <li><a>Baño</a></li>
                        <li><a id="ambienteCocina">Cocina</a></li>
                        <li><a>Dormitorio</li>
                        <li><a>Jardin</li>
                        <li><a>Living</li>
                    </ul>
                </div>

                <div class="col-sm-10 " style="border-left: 1px solid black">
                    <div id="contenedorOpcionesBano" class="opcionesAmbiente opcionesAmbienteActivo">
                    </div>
                </div>

И тогда это работает:

$(document).on('click', '#ambienteCocina', function(e){ 
    $("#contenedorOpcionesBano").addClass("opcionesAmbienteActivo");
});

Но это не так!

$(document).on('click', '#ambienteCocina', function(e){ 
    $("#contenedorOpcionesBano").removeClass("opcionesAmbienteActivo");
});

Есть идеи?

РЕДАКТИРОВАТЬ ::

Я также попробовал этот способ, который все еще не работает

html, изменен:

                <li><a id="ambienteCocina" onclick="cambiarAmbiente()">Cocina</a></li>

.JS Изменено:

function cambiarAmbiente() {
    $("#contenedorOpcionesBaño").removeClass("opcionesAmbienteActivo");
    console.log("CHanged");
}

Однако отображается консоль входа в систему!

Answer 1

в этом фрагменте вы можете убедиться, что код работает.может быть, вы можете опубликовать свой CSS

$(document).on('click', '#ambienteCocina', function(e){ 
    $("#contenedorOpcionesBano").removeClass("opcionesAmbienteActivo");
});

.opcionesAmbienteActivo{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
    <div class="col-sm-2">
        <h4>Ambiente</h4>
        <ul>
            <li><a>Baño</a></li>
            <li><a id="ambienteCocina">Cocina</a></li>
            <li><a>Dormitorio</a></li>
            <li><a>Jardin</a></li>
            <li><a>Living</a></li>
        </ul>
    </div>

    <div class="col-sm-10 " style="border-left: 1px solid black">
      <div id="contenedorOpcionesBano" class="opcionesAmbiente opcionesAmbienteActivo">
        opcionesAmbienteActivo
      </div>
    </div>
</div>

так же, как наблюдение, в списке последние 3 <a> не закрываются

Если вы хотите добавитьили удалите класс, который я рекомендую использовать jQuery toggleClass .которые позволяют добавлять или удалять классы в зависимости от наличия класса

Answer 2

Вы можете попробовать:

$(document).on('click', '#ambienteCocina', function(e){ 
    $("#contenedorOpcionesBano").toggleClass("opcionesAmbienteActivo");
});

или

Использовать перед использованием

Answer 3

Проблема была в моем файле .css,

У меня были эти стили:

 .opcionesAmbiente {
    display: none;
}
.opcionesAmbiente .opcionesAmbienteActivo {
    display: block;
}

И это означает, что .opcionesAmbienteActive должен быть дочерним по отношению к .opcionesAmbiente.Таким образом, это было исправлено следующим образом:

.opcionesAmbiente {
    display: none;
}
.opcionesAmbiente.opcionesAmbienteActivo {
    display: block;
}

Что относится к элементу, который имеет бот .opcionesAmbiente AND .opcionesAmbienteActivo