Bootqurap Navbar bağlantılarını jquery yoluyla gizle

Question

ajax kullanarak bir JavaScript işlevinde belirlenen bir sanal makinenin durumuna bağlı olarak navbar bağlantılarındaki metni gösterme/gizleme veya değiştirme ihtiyacım var. navbar gösterildiği gibi çok sade:

<div class="container"> 
<nav id="navbar-example" class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <label class="navbar-text">Host Status</label> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse bs-example-js-navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a id="openConsole" href="#">Open Console</a></li> 
       <li><a id="powerAction" href="#">Power Off</a></li> 
       <li><a id="restart" href="#">Restart</a></li> 
       <li><a id="reclaim" href="#">Reclaim</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

javascript ne denedim fonksiyonu:

function GetVMStatus (host) { 
    $.ajax({ 
     url: "/SystemBuildRequests/GetVMStatus", 
     data: { hostname: host }, 
     success: function (theStatus) { 
      $("#vmStatus").text(theStatus.Status); 
      $("#memoryAmt").text(theStatus.MemoryAmt + "GB"); 
      $("#cpuCount").text(theStatus.Cores); 
      $("#storageAmt").text(theStatus.ProvisionedSpace + "GB"); 
      $("#uptime").html(theStatus.Uptime); 
     } 
    }); 

    if ($("#vmStatus").text() == "running") 
    { 
     $("#reclaim").attr("style", "display:none"); 
     $("#powerAction").text("Power Off"); 
    } 
    else 
    { 
     $("#reclaim").attr("style", "display:block"); 
     $("#powerAction").text("Power On"); 
    } 
} 

ben jquery fonksiyonları .Show kullanarak çalıştı() ve sahip .hide() aynı sonuç. CSS hakkında çok az şey biliyorum ve bu duruma nasıl uygulanacağını biliyorum. JQuery tabanlı bir çözüm olmasını isterim.

Teşekkürler!

Answer 1

Diego'dan ipucu aldıktan sonra iki sorun yaşadım.

$("#reclaim").attr("style", "display:none"); 

nasıl stil özelliği üzerinden ayarlamak çalışmak yerine gizlemek/göstermek sorunu çözdü öğe için css sınıfını geçiş yapmak için bana gösterdi this solution bulundu:

. Neden daha önce çalışmadığını bilmiyorum, ama bu zaten daha zarif bir çözüm gibi görünüyor.

Sonra o seçeneği ettim:

<li><a id="powerAction" href="#">Power Off</a></li> 

varsayılan olarak "Power Off" göstermesi gerekir, ancak kod çalışıyordu bana "Güç Açma" gösteriyordu. $("#vmStatus").text() değerine bir uyarı verdikten sonra bana durum değerinin boş olduğunu gösterdi. Daha sonra ajax çağrısının senkronize olmayan bir şekilde yürütüldüğünü ve kodun ajax çağrısından önce değeri kontrol ettiğini anladım. here bulduğum çözüm, ajax çağrısına async: false eklememi sağladı. Şimdi her şey istediği gibi çalışıyor.