隐藏css的元素不随javascript .show（）改变

Question

我有一个在初始化时隐藏的下拉列表，因为它不需要，除非客户端实际选择了特定的单选按钮列表对象。我目前通过

将其设置为 false

dlInterval.Attributes.CssStyle[HtmlTextWriterStyle.Visibility] = "hidden";

但是，尝试通过 javascript 在选择时更改此设置失败了，目前，我已将我的代码设置为这样执行。

<script type="text/javascript" language="javascript">
    $(document).ready(function () {          
        $("#<%=rblVectorChoices.ClientID%>").click(function() {
            var intVectorSelectedIndex = $('#<%=rblVectorChoices.ClientID %> input[type=radio]:checked').val();
            $("#<%=dlInterval.ClientID %>").style.visibility="visible";
            if (intVectorSelectedIndex == 1) {
                $("#<%=dlInterval.ClientID%>").show();
            } else {
                $("#<%=dlInterval.ClientID%>").hide();
            }
        });
    });
</script>

如您所见，我目前正在尝试将可见性从隐藏更改为可见，但我在浏览器控制台中收到错误“TypeError: Cannot set property 'visibility' of undefined'

这对我来说没有多大意义，因为字段应该被隐藏，而不仅仅是 null。导致这种情况发生的原因是什么，有什么好的解决方案？

Answer 1

HTML 属性不称为visibility。

在 CSS 中，.show() / .hide() 的对应属性是 display。

Answer 2

您要查找的代码是：

 dlInterval.Attributes.CssStyle["display"] = "none";

或者你可以改变 javascript 的样子，我个人认为如果你要在 javascript 中显示它，你应该在 javascript 中隐藏元素。而不是在 .Net 代码中设置 display:none; 会在页面呈现时消失

只需像这样重写您的代码：

<script type="text/javascript" language="javascript">
    $(document).ready(function () {  

        // hide element initially
       $("#<%=dlInterval.ClientID%>").hide();     

        $("#<%=rblVectorChoices.ClientID%>").click(function() {

             // much easier way to check if check box is checked
            if ( $("#<%=rblVectorChoices.ClientID input[type=radio]:checked%>").is(":checked)) {
                $("#<%=dlInterval.ClientID%>").show();
            } else {
                $("#<%=dlInterval.ClientID%>").hide();
            }
        });
    });
</script>

另外，我强烈，强烈建议使用类来选择你的 html 元素，使用 javascript 或 jquery，.Net 会破坏 id，你必须写出这个奇怪的语法来获得正确的 id，使用类可以防止所有这些

注意：如果您要使用第二个示例，那么您永远不需要弄乱

   dlInterval.Attributes.CssStyle["display"] = "none";

Answer 3

你能用 prop 来比较它是真还是假吗？另外，您不能调用 $("#").style.visibility="visible";你必须这样称呼它：

对于那些回忆缺失的 .NET 内联 ID 的人来说，这是我修改后的代码：

$(document).ready(function () {
    $("#<%=rblVectorChoices.ClientID%>").click(function () {
        var intVectorSelectedIndex = $('#<%=rblVectorChoices.ClientID%>').prop('checked');
        $("#<%=dlInterval.ClientID%>").css('visibility', 'visible');
    if (intVectorSelectedIndex == true) {
        $("#<%=dlInterval.ClientID%>").show();
    } else {
        $("#<%=dlInterval.ClientID%>").hide();
    }
});