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

您需要使用<div ng-class="{ 'sortable': sortable }"> <div class="ui-grid-cell-contents" col-index="renderIndex" title="TOOLTIP"> <span>{{ col.displayName CUSTOM_FILTERS }}</span> <span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }">   </span> </div> <div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" ng-click="toggleMenu($event)" ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}"> <i class="ui-grid-icon-angle-down"> </i> </div> <div ui-grid-filter></div> </div>（id）选择器。然后改变：

要：

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

此外，您不需要包装var spanNivelRiesgo = $("#spanNivelRiesgo1").is(":visible") ? $("#spanNivelRiesgo1") : $("#spanNivelRiesgo2");，因为它已经是jQuery对象。所以你可以使用：

spanNivelRiesgo

相反：

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应用样式

2 个答案: