Question

应该让用户选择一个要参加的活动，但是说该用户想要参加一个在星期二上午9点至下午12点之间举行的活动，则该当天与该时间冲突的所有其他活动都必须被禁用，并直通文字装饰。

我已经尝试遍历复选框，但是我尝试过的方法行不通。条件的另一部分需要添加（&&），但我不确定如何编写。

在此情况下，我需要什么：

首先，活动是否与刚刚的活动点击了吗？我们可以通过查看活动标签文本是否可以进行检查包含上述日期和时间变量值。
1. 第二，该活动不同于刚刚的活动点击了吗？我们可以检查一下通过查看活动标签文本是否不等于标签文本的活动只需单击。”

我相信我的条件的第一部分是正确的，但是每点击几下，当它应该为真或相反时，它将给我错误。

for (let i = 0; i < checkboxes.length; i++) {  
    //Loop through checkboxes with checkboxes[i] . 
    //see if the selected checkbox contains the day and time . 
    //if other checkbox texts contain selected day and time, disable .  
    //and use css to add a line through <label> and <input>  
    /*
    ex: if user selects activity with day Tuesday and time 9am-12pm . 
    all other events with the time 9am-12pm on a Tuesday need to be    
    disabled and put a line through.  
    */
    }

    /*
    bottom code needs to go somewhere in loop to compare date.  
    It also needs another condition (&&) to run the condition  
    correctly, I just dont know what it is yet.  

    Here is the study guide I'm using my issue starts on page 5.

    [Google](https://drive.google.com/file/d/1Vw658- 
    9KUiUZ5yHaABvkytC9W2QBYiW_/view) . 
    */
    if (chosenArr.includes(parsedDate)) { . 
    console.log(chosenArr);   
    console.log(parsedDate);   
    console.log(true);   
    return;  
    } else { . 
    console.log(false);  
    } . 

    chosenArr.push(parsedDate);

单击同一日期和同一时间的两个事件时，控制台应该响应，如果时间和日期不匹配，则控制台应该响应false。如果多数民众赞成不正确的输出，单击不同的事件将返回true。如果我能找出病情的另一部分，我也许就能得到正确的输出。

Answer 1

一种帮助解决此问题的方法是在项目中添加data属性，这些属性可以保存每个事件的开始日期和时间以及结束开始和时间。对于第一个项目，您还具有一个超级条件，基本上应该禁用所有其他条件。

以下是一个基本示例，需要进一步清除。

$(function() {
  function getTimes(el) {
    var st = Date.parse(el.data("start"));
    var et = Date.parse(el.data("end"));
    return [new Date(st), new Date(et)];
  }

  function compareTimes(a, b) {
    var x = getTimes(a),
      y = getTimes(b);
    if (y[0] >= x[0] && y[0] < x[1]) {
      // Conflict in Start time
      return -1;
    }
    return 1
  }

  function checkOthers(that, p) {
    $("input:checkbox:not([name=all])", p).not(that).each(function(i, el) {
      if (compareTimes(that, $(el)) == -1) {
        $(el).prop("disable", true).parent().addClass("strike");
      } else {
        $(el).prop("disable", false).parent().removeClass("strike");
      }
    });
  }

  $("input:checkbox").change(function() {
    if ($(this).is("[name='all']")) {
      $(".activities input:checkbox").not(this).each(function(i, el) {
        if ($(el).parent().hasClass("strike")) {
          $(el).prop("disabled", false).parent().removeClass("strike");
        } else {
          $(el).prop("disabled", true).parent().addClass("strike");
        }
      });
    } else {
      checkOthers($(this), $(".activities"));
    }
  });
});

body,
input,
button {
  font-family: 'Roboto', sans-serif;
}

body {
  font: 1em/1.5;
  color: #184f68;
  background: #accbd9;
}

form {
  padding: .875em 1.875em 1.875em;
  background: #85b5ca;
}

fieldset,
legend,
button {
  padding: 0;
  border: none;
}

fieldset {
  margin-top: 1.5em;
}

legend,
button {
  font-size: 1.25em;
}

legend {
  font-weight: 500;
  padding-top: .5em;
  border-top: 2px solid #679cb3;
  margin-bottom: 1.125em;
}

input[type="text"],
input[type="email"],
legend {
  width: 100%;
}

label {
  color: #000;
  display: block;
  margin-bottom: .5em;
}

label.strike {
  text-decoration: line-through;
}

input,
select {
  margin-bottom: 1.125em;
}

input {
  font-size: 1em;
  font-weight: 500;
  padding: .8em;
  background: #c1deeb;
  border: 2px solid #c1deeb;
  outline: none;
}

input:focus {
  background: #fff;
  border-color: #5e97b0;
  transition: border-color .4s, background-color .4s;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
}

button {
  color: #fff;
  padding: .55em 1.25em;
  background: #22627e;
  margin: 1.25em 0 .5em;
  cursor: pointer;
}

button:hover {
  background: #184c62;
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css" />
<fieldset class="activities">
  <legend>Register for Activities</legend>
  <label><input type="checkbox" name="all" data-start="2019-07-30T9:00:00" data-end="2019-07-31T16:00:00" /> Main Conference — $200</label>
  <label><input type="checkbox" name="js-frameworks" data-start="2019-07-30T9:00:00" data-end="2019-07-30T12:00:00" > JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label>
  <label><input type="checkbox" name="js-libs" data-start="2019-07-30T13:00:00" data-end="2019-07-30T16:00:00" /> JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100</label>
  <label><input type="checkbox" name="express" data-start="2019-07-30T9:00:00" data-end="2019-07-30T12:00:00" /> Express Workshop — Tuesday 9am-12pm, $100</label>
  <label><input type="checkbox" name="node" data-start="2019-07-30T13:00:00" data-end="2019-07-30T16:00:00" /> Node.js Workshop — Tuesday 1pm-4pm, $100</label>
  <label><input type="checkbox" name="build-tools" data-start="2019-07-31T9:00:00" data-end="2019-07-31T12:00:00" /> Build tools Workshop — Wednesday 9am-12pm, $100</label>
  <label><input type="checkbox" name="npm" data-start="2019-07-31T13:00:00" data-end="2019-07-31T16:00:00" /> npm Workshop — Wednesday 1pm-4pm, $100</label>
</fieldset>

您现在可以看到复选框具有额外的HTML：

<label><input type="checkbox" name="js-frameworks" data-start="2019-07-30T9:00:00" data-end="2019-07-30T12:00:00" > JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label>

可以使用.data()轻松地调用数据属性，这对于将数据绑定到元素非常有用。我使用ISO 8601日历日期扩展格式YYYY-MM-DDTHH:MM:SS的简化来填充它们。这可以轻松地用于解析为Date对象。 See More。

如果确实需要，您可以从字符串中捕获数据。我不建议您使用正则表达式来做到这一点。

点击复选框后，我们需要知道这是“全部”还是单个事件。总而言之，我们可以将所有其他事件设置为禁用。如果取消选中它，我们将全部撤消。否则，我们需要知道所选事件的开始和结束时间，并迭代另一个而不是“所有”项目，以查看是否存在冲突。大多数操作都是通过.each()

完成的

将日期和时间转换为日期对象，我们可以在逻辑上将它们与<，<=，==，!=，>=和{{ 1}}。这样可以轻松查看事件的开始时间是否在另一个事件的开始时间与结束时间之间。

希望这有助于您前进。

使用条件和循环禁用有冲突的代码

1 个答案: