JQuery 没有删除 class

Question

当我尝试仅在单击 <a> 标签时删除 class 时，我遇到了麻烦。添加 class 效果很好，但 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 文件上，

我有那些款式：

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

这意味着 .optionsEnvironmentActive 必须是 .optionsEnvironment 的子项。于是就这样修复了：

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

什么指的是具有 bot .optionsEnvironment AND .optionsEnvironmentActive 的元素

Answer 2

在此代码段中，您可以验证代码是否正常工作。也许你可以 post 你的 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>没有关闭

如果你想添加或删除 class 我建议你使用 jQuery toggleClass。允许根据 class 的存在

添加或删除 classes

Answer 3

你可以试试：

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

或

Use off before using on

JQuery 没有删除 class

JQuery doesn't remove class

html

javascript

jquery

jquery-events