Używanie JQuery do dodawania łącza do elementu, jeśli spełniony jest warunek

Question

Jestem bardzo nowy w HTML, CSS i JavaScript. Próbuję użyć jQuery, aby przycisk aktywny lub nieaktywny w zależności od pory dnia. Udało mi się uzyskać poprawną zmianę obrazu po zdefiniowaniu czasu (d), czasu open i czasu close. Mam jednak problem z przypisaniem linku do przycisków w zależności od pory dnia.

Ten kod poprawnie stosuje klasę, jeśli czas jest między open a close. Poprawnie stosuje także łącze do ButtonOne div, tylko gdy klasa ManagersChatButtonActive jest zastosowana w JSFiddle. Jednak w SharePoint, jeśli tak się stanie, link jest stosowany również wtedy, gdy warunek czasu nie jest spełniony.

Jak mogę uzyskać, aby łącze było stosowane tylko po spełnieniu warunku "Jeśli"?

(To jest mój pierwszy raz na przepełnieniu stosu, więc przepraszam, jeśli nie jest to zbyt dobrze określone lub wyjaśnione).

$(document).ready(function() { 
    var d = new Date(); 
    var open = new Date(); 
    open.setHours(9); 
    open.setMinutes(0); 
    open.setSeconds(0); 

    var close = new Date(); 
    close.setHours(18); 
    close.setMinutes(0); 
    close.setSeconds(0); 

    if (d >= open && d < close) { 
     $(".ButtonOne").addClass("ManagersChatButtonActive"); 
     $(".ButtonOne").wrap('<a href="http://www.google.com"/>'); 
    } else { 
     $(".ButtonOne").addClass("ManagersChatButtonInactive"); 
    } 
}); 

Answer 1

Upewnij się zawinąć metodę w składni JQuery dla dokumentu na gotowy lub od obciążenia, co następuje:

$(function(){ 
    var d = new Date() 

    var open = new Date(); 
    open.setHours(9); 
    open.setMinutes(0); 
    open.setSeconds(0); 

    var close = new Date(); 
    close.setHours(18); 
    close.setMinutes(0); 
    close.setSeconds(0); 

    if (d >= open && d < close) { 

    $(".ButtonOne").addClass("ManagersChatButtonActive"); 
    $(".ButtonOne").wrap('<a href="http://www.google.com"/>'); 
    } else { 
    $(".ButtonOne").addClass("ManagersChatButtonInactive"); 
    } 
}) 

https://jsfiddle.net/aaronfranco/3xwhoh10/1/

Może to również więcej sensu używać getTime() używać znacznika czasu UNIX, który jest liczbą, zamiast ciągu daty.

$(function(){ 
    var d = new Date().getTime(); 

    var open = new Date(); 
    open.setHours(9); 
    open.setMinutes(0); 
    open.setSeconds(0); 
    open = open.getTime() 

    var close = new Date(); 
    close.setHours(18); 
    close.setMinutes(0); 
    close.setSeconds(0); 
    close = close.getTime() 

    if (d >= open && d < close) { 

    $(".ButtonOne").addClass("ManagersChatButtonActive"); 
    $(".ButtonOne").wrap('<a href="http://www.google.com"/>'); 
    } else { 
    $(".ButtonOne").addClass("ManagersChatButtonInactive"); 
    } 
}) 

Answer 2

Nie zapomnij, aby uzyskać aktualny czas z getHours lub metoda getTime . Chcesz to porównać ze swoim stanem. Wartości te nie muszą być w formacie czasu, można też po prostu użyć liczb statycznych.

Można po prostu zrobić coś takiego:

var time = new Date(), 
hours = time.getHours(); 

if (hours >= 9 && hours < 18) { 
    $(".ButtonOne").addClass("ManagersChatButtonActive"); 
    $(".ButtonOne").wrap('<a href="http://www.google.com"/>'); 
} else { 
    $(".ButtonOne").addClass("ManagersChatButtonInactive"); 
} 

przykład roboczych: https://jsfiddle.net/crix/7o4uhLxe/

nadzieję, że to pomaga!

Answer 3

Sprawdziłem twój kod w przeglądarce za pomocą jQuery, ale nie wiem o SharePoint, więc domyślam się, że po prostu zamykasz kod, który działa dobrze z jQuery, w .ready(), tak, że kiedy dokument jest gotowy tylko wtedy Twój kod jest uruchamiany, a gdy ".ButtonOne" element jest inicjowany w DOM:

$(document).ready(function(){ 
 
      var d = new Date(); 
 
      var open = new Date(); 
 
      open.setHours(9); 
 
      open.setMinutes(0); 
 
      open.setSeconds(0); 
 
      console.info(d); 
 
      console.log(open); 
 
      var close = new Date(); 
 
      close.setHours(18); 
 
      close.setMinutes(0); 
 
      close.setSeconds(0); 
 
      console.log(close); 
 
      if (d >= open && d < close) { 
 
       console.info("INSIDE"); 
 
       $(".ButtonOne").addClass("ManagersChatButtonActive"); 
 
       $(".ButtonOne").wrap('<a href="http://www.google.com"/>'); 
 
      } else { 
 
       console.info("INSIDE ELSE"); 
 
       $(".ButtonOne").addClass("ManagersChatButtonInactive"); 
 
      } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="ButtonOne" > 
 
This is the desired ButtonOne Div 
 
</div>