如果满足条件，则使用JQuery向元素添加链接

Using JQuery to add a link to an element if a condition is met

本文关键字：JQuery 元素 添加 链接 满足 条件 如果      更新时间：2023-12-07

我对HTML、CSS和JavaScript非常陌生。我正试图使用jQuery根据一天中的时间使按钮处于活动或非活动状态。在定义了现在的时间（d）、open时间和close时间后，我设法使图像正确更改。然而，我在根据一天中的时间为按钮分配链接时遇到了问题。

如果时间在open和close之间，则此代码正确地应用类。只有在JSFiddle中应用了ManagersChatButtonActive类时，它才能正确地将链接应用到ButtonOnediv。然而，在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");
    }
});

确保您的方法在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");
  }
})

不要忘记使用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/

希望这能有所帮助！

我用jQuery在浏览器中检查了你的代码，但我不知道SharePoint，所以我想如果你把你的代码放在.ready（）中，这样当文档准备好时，你的代码才会运行，当".ButtonOne"元素在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>

相关文章：