如何向此 JavaScript 添加另一个条件

How do I add another condition to this javascript?

本文关键字：添加 另一个 条件 JavaScript      更新时间：2023-09-26

我有一个表单，人们可以从选择框中选择一周中的某一天。然后，仅当选择了"星期一"或"星期三"时，才能显示另一个文本字段。以下代码运行良好，唯一的问题是我不知道如何在下面的代码中添加另一个选项。现在，仅当选择"星期一"时，文本框才会弹出。我想修改代码，以便在选择"星期一"或"星期三"时弹出文本框。谁能帮忙？

我的JavaScript：

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

我的网页：

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

你可以这样做：

$('#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();
  }
});

此外，在检查相等性时使用 tripple 等于是一个好习惯。

使用此更改事件。

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

将来的可维护性，您最好使用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左右，怎么样？

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

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

相关文章：