js 中的多个 if 条件未提供所需的输出

Question

我有 3 个输入字段，第一个是 select 一部电影，第二个是 select 一个日期（日期随着电影 select 的变化而相应变化），第三个是 select select 运行时间。仅当前两个字段都已填写时，第三个字段才应更新。使用我当前的 js 代码，我有一个 if 语句来检查 selected 电影和日期。

例如，如果 Avengers Endgame 和星期三是 selected，它应该显示晚上 9 点，如果 Avengers Endgame 和星期六是 selected，它应该显示 6PM。（暂时只加了那些）

问题是，在最初 select 残局和星期三之后，它确实显示晚上 9 点，但如果我随后将日期更改为星期六，它不会更新，换成另一部电影也是如此.

Codepen Demo

// ----Date----

var date = new Date();
date.setDate(date.getDate());

$(function() {
  $("#datepicker")
    .datepicker({
      startDate: date,
      autoclose: true,
      todayHighlight: true
    })
    .datepicker("update", new Date());
});

// --functions--

$(document).ready(function() {
  var list1 = document.getElementById("selectTitle");

  list1.options[0] = new Option("--Select Title--", "");
  list1.options[1] = new Option("Avengers Endgame", "endgame");
  list1.options[2] = new Option("Top End Wedding", "topend");
  list1.options[3] = new Option("Dumbo", "dumbo");
  list1.options[4] = new Option("The Happy Prince", "happyprince");
});

function getAvailableDates() {
  var list1 = document.getElementById("selectTitle");
  var list2 = document.getElementById("selectTime");
  var list1SelectedValue = list1.options[list1.selectedIndex].value;

  if (list1SelectedValue == "endgame") {
    $("#datepicker").datepicker("setDaysOfWeekDisabled", [1, 2]);
    $("#datepicker").datepicker("setDate", date);
  } else if (list1SelectedValue == "dumbo") {
    var selectedDate = $("#datepicker").datepicker("getDate");

    var selectedDay = selectedDate.getDay();
    document.getElementById("demo").innerHTML = selectedDay;
    $("#datepicker").datepicker("setDaysOfWeekDisabled", []);
    $("#datepicker").datepicker("setDate", date);
  } else if (list1SelectedValue == "happyprince") {
    $("#datepicker").datepicker("setDaysOfWeekDisabled", [1, 2]);
    $("#datepicker").datepicker("setDate", date);
  } else if (list1SelectedValue == "topend") {
    $("#datepicker").datepicker("setDaysOfWeekDisabled", [3, 4, 5]);
  }
}

// --detect date change--
$("#datepicker")
  .datepicker()
  .on("changeDate", function(e) {
    var selectedDate = $("#datepicker").datepicker("getDate");
    var selectedDay = selectedDate.getDay();

    var list1 = document.getElementById("selectTitle");
    var list2 = document.getElementById("selectTime");
    var list1SelectedValue = list1.options[list1.selectedIndex].value;

    if ((list1SelectedValue == "endgame") && (selectedDay >= 3 && selectedDay <= 5)) {
      list2.options.length = 0;
      list2.options[0] = new Option("9PM", "T18");
    }
    if ((list1SelectedValue == "endgame") && (selectedDay = 6)) {
      list2.options.length = 0;
      list2.options[0] = new Option("6PM", "T18");
    }
    document.getElementById("demo").innerHTML = selectedDay;
  });

.form-control {
  width: auto;
}


/* <!-- Datepicker --> */

label {
  margin-left: 20px;
}

#datepicker {
  width: 180px;
  margin: 0 20px 20px 20px;
}

#datepicker>span:hover {
  cursor: pointer;
}


/* Animated Border */

#box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  color: black;
  font-family: "Raleway";
  font-size: 2.5rem;
}

.gradient-border {
  --borderWidth: 3px;
  background: white;
  position: relative;
  border-radius: var(--borderWidth);
}

.gradient-border:after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient( 60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

h1 {
  width: auto;
  margin-top: -5.3em;
  margin-left: -3em;
  background: white;
}

.container-box {
  display: flex;
  flex-wrap: wrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
  <select class="form-control" id='selectTitle' name='selectTitle' onClick="getAvailableDates()">
  </select>
  <!-- Datepicker -->

  <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
    <input class="form-control" type="text" readonly />
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
  </div>

  <h4></h4>
  <select class="form-control" id='selectTime' name='selectTime'>
  </select>

  </>
</div>

<p id="demo"></p>

Codepen Demo

Answer 1

问题已解决 bcoz in your if condition is not proper.

这是有效的 js 代码：-

// ----Date----

var date = new Date();
date.setDate(date.getDate());

$(function() {
  $("#datepicker")
    .datepicker({
      startDate: date,
      autoclose: true,
      todayHighlight: true
    })
    .datepicker("update", new Date());
});

// --functions--

$(document).ready(function() {
  var list1 = document.getElementById("selectTitle");

  list1.options[0] = new Option("--Select Title--", "");
  list1.options[1] = new Option("Avengers Endgame", "endgame");
  list1.options[2] = new Option("Top End Wedding", "topend");
  list1.options[3] = new Option("Dumbo", "dumbo");
  list1.options[4] = new Option("The Happy Prince", "happyprince");
});

function getAvailableDates() {
  var list1 = document.getElementById("selectTitle");
  var list2 = document.getElementById("selectTime");
  var list1SelectedValue = list1.options[list1.selectedIndex].value;

  if (list1SelectedValue == "endgame") {
    $("#datepicker").datepicker("setDaysOfWeekDisabled", [1, 2]);
    $("#datepicker").datepicker("setDate", date);
  } else if (list1SelectedValue == "dumbo") {
    var selectedDate = $("#datepicker").datepicker("getDate");

    var selectedDay = selectedDate.getDay();
    document.getElementById("demo").innerHTML = selectedDay;
    $("#datepicker").datepicker("setDaysOfWeekDisabled", []);
    $("#datepicker").datepicker("setDate", date);
  } else if (list1SelectedValue == "happyprince") {
    $("#datepicker").datepicker("setDaysOfWeekDisabled", [1, 2]);
    $("#datepicker").datepicker("setDate", date);
  } else if (list1SelectedValue == "topend") {
    $("#datepicker").datepicker("setDaysOfWeekDisabled", [3, 4, 5]);
  }
}

// --detect date change--
$("#datepicker")
  .datepicker()
  .on("changeDate", function(e) {
    var selectedDate = $("#datepicker").datepicker("getDate");
    var selectedDay = selectedDate.getDay();

    var list1 = document.getElementById("selectTitle");
    var list2 = document.getElementById("selectTime");
    var list1SelectedValue = list1.options[list1.selectedIndex].value;
    console.log(selectedDay+list1SelectedValue);
    if ((list1SelectedValue == "endgame") && (selectedDay >=3 && selectedDay<=5)) {
      //list2.options.length = 0;
      //list2.options[0] = new Option("9PM", "T18");
      $(new Option('9PM','T18')).appendTo('#selectTime');
    }
    if ((list1SelectedValue == "endgame") && (selectedDay==6 )) {
      list2.options.length = 0;
      list2.options[0] = new Option("6PM", "T18");
    }
    document.getElementById("demo").innerHTML = selectedDay;
  });

Answer 2

if 语句中的

selectedDay 缺少相等比较 ==。应该是

if(selectedDay == 6)

js 中的多个 if 条件未提供所需的输出

Multiple if conditions in js not giving desired output

javascript

css

if-statement

bootstrap-datepicker

bootstrap-4