javascript - 如果满足条件，使用 JQuery 添加指向元素的链接

Question

我对 HTML、CSS 和 JavaScript 非常陌生。我正在尝试使用 jQuery 根据一天中的时间使按钮处于事件状态或非事件状态。在定义现在时间 (d)、open 时间和 close 时间后，我设法让图像正确更改。但是，我在根据一天中的时间为按钮分配链接时遇到问题。

如果时间在 open 和 close 之间，此代码会正确应用类。仅当在 JSFiddle 中应用 ManagersChatButtonActive 类时，它还正确地将链接应用到 ButtonOne div。但是，在 SharePoint 中，即使不满足时间条件，也会应用该链接。

如何让链接仅在满足“if”条件时应用？

(这是我第一次使用 Stack Overflow，如果布局或解释不当，请见谅)。

$(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

请确保将您的方法包装在 JQuery 语法中，以便文档准备就绪或加载时如下所示:

$(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/

使用 getTime() 来使用 UNIX 时间戳(它是一个数字)而不是日期字符串可能更有意义。

$(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");
  }
})