如果满足条件，则使用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");
  }
})

Answer 2

不要忘记使用getHours或getTime方法获取当前时间。 你希望这与你的状况进行比较。 这些值不必是时间格式，也可以只使用一些静态数字。

你可以这样做：

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

工作示例： https ： //jsfiddle.net/crix/7o4uhLxe/

希望这可以帮助！

Answer 3

我在浏览器中使用jQuery检查了你的代码，但是我不知道关于SharePoint的问题，所以我想如果你只是将你的代码用jQuery工作，在.ready（）中，这样当文档准备就绪时你的代码就运行了当在.dom中初始化“.ButtonOne”元素时：

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