如何向此JavaScript添加其他条件？

Question

我有一个表格，人们可以从选择框中选择星期几。 然后，仅在选择星期一或星期三时，才显示另一个文本字段。 下面的代码运行完美，唯一的问题是我不知道如何在下面的代码中添加另一个选项。 现在，仅在选择“星期一”时才弹出文本框。 我想修改代码，以便在选择“星期一”或“星期三”时弹出文本框。 有人可以帮忙吗？

我的JavaScript：

$(document).ready(function() {

//Hide the field
$("#hide1").hide();

//Show the field
$('#option').change(function() {
    if ($("#option").val() == "Monday") {
        $("#hide1").show();
    }
    else {
        $("#hide1").hide();
    }
});
});

我的html：

<select name="option" id="option">
<option value="Monday" selected="selected">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
</select>

Answer 1

您可以这样做：

$('#option').change(function() {
    if ($("#option").val() === "Monday" || $("#option").val() === "Wednesday") {
        $("#hide1").show();
    }
    else {
        $("#hide1").hide();
    }
});

但是，在某些时候，您的病情可能会变长（例如，周一或周三，周六或周日...）

if ($("#option").val() === "Monday" || $("#option").val() === "Wednesday" || $("#option").val() === "Saturday" || $("#option").val() === "Sunday" ) {

这很冗长。 您还要查询DOM太多次。

而是考虑这样做：

var acceptedDays = [
  "Monday",
  "Wednesday",
  "Friday"
]

$('#option').change(function() {
  var day = $("#option").val(); // query the DOM once
  if (acceptedDays.indexOf(day) !== -1){
    $("#hide1").show();
  } else {
    $("#hide1").hide();
  }
}); 

同样，在检查相等性时使用三重相等也是一个好习惯。

Answer 2

使用此更改事件。

$('#option').change(function() {
    if ($("#option").val() == "Monday" || $("#option").val() == "Wednesday") {
        $("#hide1").show();
    }
    else {
        $("#hide1").hide();
    }
});

Answer 3

为了将来的可维护性，您最好使用switch/case ：

switch($("#option").val()) {
    case "Monday":
        // do something on Monday
        break;
    case "Tuesday":
        // do other things on Tuesday
        break;
    case "Wednesday":
    case "Thursday":
        // you can also combine two cases together
        // in this particular case it equals the following if statement
        // if(val === "Wednesday" || val === "Thursday") {...}
        // do things on Wednesday and Thursday
        break;
}

看看它的可维护性如何？ 除非您仍然喜欢这种风格，否则它可以帮助您摆脱else if ：

if(val === "Monday") {
    // something
} else if(val === "Tuesday") {
    // other things
} else if(val === "Wednesday" || val === "Thursday") {
    // oh my god it's boring
} else if(val === "Friday") {
    // who knows...
}

想想看，如果你正在一个日历，我给你30 else if还是这样，怎么样？

Answer 4

Click on this link 
i have update your code on jsfiddle.

Visit 

http://jsfiddle.net/erkunalpatel/2wtkod18/4/