javascript - 隐藏和显示 div 不起作用，元素更改其属性当我使用 console.log() 但不显示

Question

我正在使用 ASP.NetCore 2.0 获得一个 View ，并且我试图在用户使用 toggle 按钮时显示和隐藏一个元素，但我真的不知道不知道发生了什么

我的 HTML:

<div class="row" id="ToggleClasificarIVA">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="form-check has-success">
                                <label class="control-label">Clasificar Impuesto al valor agregado</label>
                                <div class="switch">
                                    <label>
                                        <input type="checkbox" id="ClasificarIvaToggle" ><span class="lever"></span>
                                    </label>
                                </div>
                            </div>

                        </div>
                    </div>



                    <div class="row" id="CodigoActividadDropdown" style="display:none">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="form-group has-success">
                                <label class="control-label">Codigo de Actividad</label>
                                <select class="form-control custom-select">
                                    <option value="0">---Seleccione---</option>
                                    <option value="1">Cedula Fisica</option>
                                    <option value="2">Cedula Juridica</option>
                                    <option value="3">Dimex</option>
                                    <option value="4">Nite</option>
                                </select>
                            </div>
                        </div>
                    </div>

还有我的 JS:

$('#ClasificarIvaToggle').click(function () {
    if (this.checked) {
        $('#CodigoActividadDropdown').css("display", "block");
        alert("Checekado")
        console.log(document.getElementById("CodigoActividadDropdown"))
    }
    else {
        $('#CodigoActividadDropdown').css("display", "none");
        alert("UnChecekado")
        console.log(document.getElementById("CodigoActividadDropdown"))

    }
});

我尝试过使用:

$('#ClasificarIvaToggle').click(function () {
if (this.checked) {
    $('#CodigoActividadDropdown').css("display", "block");
    alert("Checekado")
}
else {
    $('#CodigoActividadDropdown').css("display", "none");
    alert("UnChecekado")

}
});

另外:

$('#ClasificarIvaToggle').change(function () {
if (this.checked) {
    $('#CodigoActividadDropdown').fadeIn('slow');
}
else {
    $('#CodigoActividadDropdown').fadeOut('slow');
}

});

即使只有 js:

document.getElementById("ClasificarIvaToggle").onclick = function () {
    if (this.checked) {
        document.getElementById("CodigoActividadDropdown").style.display = "block";
    }
    else {
        document.getElementById("CodigoActividadDropdown").style.display = "none";
    }
}

当我使用 console.log(getElementByID("")) 记录元素时，我可以看到该元素更改了显示属性，但它没有显示在我的文档中。

Answer 1

我完全使用了您提供的内容，它可以在 JSfiddle 上运行。 https://jsfiddle.net/fnchz375/

$('#ClasificarIvaToggle').click(function () {
if (this.checked) {
    $('#CodigoActividadDropdown').css("display", "block");
    alert("Checekado")
    console.log(document.getElementById("CodigoActividadDropdown"))
}
else {
    $('#CodigoActividadDropdown').css("display", "none");
    alert("UnChecekado")
    console.log(document.getElementById("CodigoActividadDropdown"))

}

});

您能否提供您从控制台获得的任何日志/错误。另外，请随意尝试 jsfiddle 上的示例。