隱藏和顯示 div 不起作用，當我使用 console.log() 但不顯示時，元素會更改其屬性

Question

我正在使用ASP.NetCore 2.0有一個視圖，當用戶使用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 上的示例。

Answer 2

試試這個：

    $(document).ready(function() {
       $('#ClasificarIvaToggle'). change(function () {
         if (this.checked) {
             $('#CodigoActividadDropdown').hide();

           }
           else {
                 $('#CodigoActividadDropdown').show();
           }
           });
      });

Answer 3

嘗試一次，這不應該失敗:)

jQuery('body').on('change','#ClasificarIvaToggle',function(){

    if(jQuery(this).is(":checked"))
    {
        jQuery(this).parents("#ToggleClasificarIVA").find("#CodigoActividadDropdown").show();
    }
    else
    {
        jQuery(this).parents("#ToggleClasificarIVA").find("#CodigoActividadDropdown").hide();
    }
});