使用 jquery 应用样式

Question

我正在使用 asp.net c# 开发 Web 应用程序，我有一个 div 元素，在服务器端我将此样式应用于 div 元素：

spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden");

我有一个单选按钮列表，在点击事件中我试图显示 div 元素，但它不起作用

var spanNivelRiesgo = $("spanNivelRiesgo1").is(":visible") ? $("spanNivelRiesgo1") : $("spanNivelRiesgo2");

如果单击选项号 div 必须出现：

$(spanNivelRiesgo).css({'display':'block', 'visibility':'visible'});

但它不起作用，我是 jquery 的新手，所以我不确定哪里出了问题。

完整代码如下：

<div class="span" id="spanNivelRiesgo1" runat="server" visible="False">
                <table class="table_span">
                    <tr>
                        <td style="width: 230px;">Nivel de Riesgo:</td>
                        <td>
                            <asp:DropDownList ID="ddlNivelRiesgo1" runat="server" Width="150px" CausesValidation="True" ValidationGroup="a"></asp:DropDownList></td>
                    </tr>
                </table>
            </div>

<div class="span" id="spanNivelRiesgo2" runat="server" visible="False">
                <table class="table_span">
                    <tr>
                        <td style="width: 230px;">Nivel de Riesgo:</td>
                        <td>
                            <asp:DropDownList ID="ddlNivelRiesgo2" runat="server" Width="150px" CausesValidation="True" ValidationGroup="a"></asp:DropDownList></td>
                    </tr>
                </table>
            </div>

在服务器端：

if (_oportunidadMejora)
            {
                rblOportunidadMejora1.Items[0].Selected = rblOportunidadMejora2.Items[0].Selected = true;
                spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden");
                spanNivelRiesgo2.Attributes.Add("style", "display:none; visibility:hidden");
            }
            else
            {
                rblOportunidadMejora1.Items[1].Selected = rblOportunidadMejora2.Items[1].Selected = true;
                try
                {
                    spanNivelRiesgo1.Attributes.Add("style", "display:block; visibility:visible");
                    ddlNivelRiesgo1.SelectedValue = _nivelRiesgo;
                    spanNivelRiesgo2.Attributes.Add("style", "display:block; visibility:visible");
                    ddlNivelRiesgo2.SelectedValue = _nivelRiesgo;
                }
                catch { }

页面加载时：

rblOportunidadMejora2.Attributes.Add("onclick", string.Format("javascript:return OportunidadMejora();"));

客户端：

function OportunidadMejora(){

            var RB1 = document.getElementById("<%=rblOportunidadMejora2.ClientID%>");
            var spanNivelRiesgo = $("spanNivelRiesgo1").is(":visible") ? $("spanNivelRiesgo1") : $("spanNivelRiesgo2");
            var lblFecha = document.getElementById("<%=lblFechaCumplimiento.ClientID%>");
            var lblPlazo = document.getElementById("<%=lblPlazo.ClientID%>");

            var radio = RB1.getElementsByTagName("input");
            var isChecked = false;

            for (var i = 0; i<radio.length;i++){
                if(radio[i].checked){
                    if(radio[i].value == "True"){//La opción si, está marcada
                        $(spanNivelRiesgo).css({'display':'none', 'visibility':'hidden'});
                        //spanNivelRiesgo.hide();
                        lblFecha.innerHTML = "Fecha de Seguimiento:";
                        lblPlazo.innerHTML = "Plazo de Seguimiento:";
                    }
                    else{//La opción no fue marcada
                        $(spanNivelRiesgo).css({'display':'block', 'visibility':'visible'});
                        //spanNivelRiesgo.show();
                        lblFecha.innerHTML = "Fecha de Cumplimiento:";
                        lblPlazo.innerHTML = "Plazo de Cumplimiento:";
                    }
                }
            }
        }

Answer 1

您需要使用 id (#) 选择器。然后更改：

var spanNivelRiesgo = $("spanNivelRiesgo1").is(":visible") ? $("spanNivelRiesgo1") : $("spanNivelRiesgo2");

收件人：

var spanNivelRiesgo = $("#spanNivelRiesgo1").is(":visible") ? $("#spanNivelRiesgo1") : $("#spanNivelRiesgo2");

此外，您不需要包装 spanNivelRiesgo，因为它已经是一个 jQuery 对象。所以你可以使用：

spanNivelRiesgo.css({'display':'block', 'visibility':'visible'});

改为：

$(spanNivelRiesgo).css({'display':'block', 'visibility':'visible'});

Answer 2

我不确定我的代码发生了什么，但我决定使用纯 JavaScript 而不是 Jquery。

这里是JS函数代码：

var spanNivelRiesgo = document.getElementById('<%=(spanNivelRiesgo1.Visible)?spanNivelRiesgo1.ClientID:spanNivelRiesgo2.ClientID%>');

if(radio[i].value == "True"){//La opción si, está marcada
                        spanNivelRiesgo.style.display = "none";
                        spanNivelRiesgo.style.visibility = "hidden";
                        lblFecha.innerHTML = "Fecha de Seguimiento:";
                        lblPlazo.innerHTML = "Plazo de Seguimiento:";
                    }
                    else{//La opción no fue marcada
                        spanNivelRiesgo.style.display = "block";
                        spanNivelRiesgo.style.visibility = "visible";
                        lblFecha.innerHTML = "Fecha de Cumplimiento:";
                        lblPlazo.innerHTML = "Plazo de Cumplimiento:";
                    }

使用 jquery 应用样式

Apply style with jquery

html

css

c#

jquery