使用 jquery 应用样式答案

【问题标题】：Apply style with jquery使用 jquery 应用样式
【发布时间】：2015-06-30 17:45:21
【问题描述】：

我正在使用 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:";
                    }
                }
            }
        }

【问题讨论】：

如果 spanNivelRiesgo1 是下拉列表的 id，使用 $('#spanNivelRiesgo1')，如果是类，则使用 $('.spanNivelRiesgo1')
也许$("spanNivelRiesgo1") 应该是$("span.NivelRiesgo1")。请出示您的 HTML。

标签： c# jquery html css

【解决方案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'});

【讨论】：

我已经改成这样了： var spanNivelRiesgo = $("#spanNivelRiesgo1").is(":visible") ? $("#spanNivelRiesgo1") : $("#spanNivelRiesgo2");和 spanNivelRiesgo.css({'display':'block'}) spanNivelRiesgo.css({'visibility':'visible'});但它还没有工作
我不知道你到底想做什么，但here你有一个例子。如果要显示Nivel de Riesgo1，请删除示例中的 CSS。我还将'visibility':'visible' 更改为'opacity':'0.5'，这样您就可以看到发生了什么。如果你现在明白了，请告诉我；）
在 jsfiddle 中工作，但在我的代码中没有，我不知道问题是否是因为该功能在 for 语句中

【解决方案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:";
                    }

【讨论】：