Применить стиль с JQuery

Question

Я работаю на веб-приложений с asp.net C# У меня есть 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 { } 

На PageLoad:

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

Я не уверен, что происходит с моим кодом, но я решил использовать чистый 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:"; 
        } 

Answer 2

Вам необходимо использовать селектор id (#). Затем измените:

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

To:

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

Также вам не нужно обернуть spanNivelRiesgo обусловленно это уже объект JQuery. Таким образом, вы можете использовать:

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

Вместо:

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