javascript：评估多个if语句而不运行else [英] javascript: evaluating multiple if statements without also running else
本文介绍了javascript：评估多个if语句而不运行else的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将一个带有多个if语句的简单javascript页面放在一起。我的想法是根据if语句堆栈的评估附加到列表中。问题是如果其中任何一个失败，它会触发else语句。我只希望它在所有失败的情况下触发其他。
< p id =fruit>我的水果篮有：< / p>
if（apples）{
document.getElementById（fruit）。innerHTML + =apples;
}
if（oranges）{
document.getElementById（fruit）。innerHTML + =oranges;
}
if（香蕉）{
document.getElementById（fruit）。innerHTML + =bananas;
}
else {
document.getElementById（fruit）。innerHTML + =nothing;
}
当我运行此条件并满足所有条件时，我会得到：
我的水果篮有：苹果橙香蕉
当我运行这个并且没有条件满足时，我会得到：
我的水果篮有：没有
但是如果不符合任何一个条件，我会得到：
我的水果篮有：苹果没有
或
我的水果篮有：苹果香蕉没有
我尝试使用 if else ，但之后它会在第一次退出'比赛'。所以在上面的例子中如果我有两个苹果和香蕉，使用 if else 将返回
我的水果篮有：苹果
而不是告诉我也有香蕉。
问题：我该怎么做所以else语句只在所有if语句都有的情况下运行失败了？
编辑
i试图让这个变得尽可能简单，但似乎我过度简化了它。
在所有if语句运行之前，其他任何内容都不可知。这就是它的条件：如果所有ifs都失败了。
我尝试使用OR运算符，它只是破坏了一切。在我的代码中，实际上在上发生了什么（如果（苹果）它正在检查今天的日期，看它是否属于日期范围。它需要根据一个相当复杂的时间表对一大堆不同的水果进行此操作，即确定在给定日期确切地在篮子中的哪些水果比仅仅根据这些规则运行时间表更难。 / p>
var isSunday = new Date（）。getDay（）; var apples1Start = new Date（2018,8,4）; // 9月4日，0 == jan。 var apples1Stop = new Date（2018,8,23）; // 9月22日，停止日期需要在第二天之后。 var apples2Start = new Date（2018,10,5）; // nov 5 var apples2Stop = new Date（2018,10,25）; // nov 24 var apples3Start = new Date（2018,10,26）; // nov 26 var apples3Stop = new Date（2018,11,9）; // dec 8 var oranges1Start = new Date（2018,3,30）; // 4月30日var oranges1Stop =新日期（2018,4,27）; //可能26 var oranges2Start = new Date（2018,9,22）; // oct 22 var oranges2Stop = new Date（2018,10,4）; // nov 3 var oranges3Start = new Date（2018,3,28）; // 4月28日var oranges3Stop =新日期（2018,3,29）; // 4月28日var bananas1Start = new Date（2018,0,1）; // jan 1 var bananas1Stop = new Date（2018,3,10）; // 4月9日var bananas2Start =新日期（2018,6,2）; // 7月2 var bananas2Stop =新日期（2019,3,11）; // 4月10日var kiwi1Start =新日期（2018,9,13）; // oct 13 var kiwi1Stop = new Date（2018,10,25）; // nov 24 var papaya1Start = new Date（2018,8,29）; // 9月29日var papaya1Stop = new Date（2018,8,30）; // 9月29日var papaya2Start = new Date（2018,10,1）; // nov 1 var papaya2Stop = new Date（2018,10,4）; // nov 3 var papaya3Start = new Date（2018,9,15）; // oct 15 var papaya3Stop = new Date（2018,10,25）; // nov 24 var papaya4Start = new Date（2018,10,26）; // nov 26 var papaya4Stop = new Date（2018,11,9）; // dec 8 var papaya5Start = new Date（2018,11,10）; // dec 10 var papaya5Stop = new Date（2019,1,1）; // dec 31 var clemantines1Start = new Date（2018,0,1）; // jan 1 var clemantines1Stop = new Date（2018,2,1）; // feb 28 var clemantines2Start = new Date（2018,9,13）; // oct 13 var clemantines2Stop = new Date（2019,1,29）; // feb 28 var pears1Start = new Date（2018,8,10）; // 9月10日var梨1Stop =新日期（2019,0,3）; // jan 2 var tangerines1Start = new Date（2018,0,1）; // jan 1 var tangerines1Stop = new Date（2018,2,9）; // mar 8 var tangerines2Start = new Date（2018,11,20）; // dec 20 var tangerines2Stop = new Date（2019,2,9）; // 3月8日star starfruit1Start = new Date（2018,0,1）; // jan 1 var starfruit1Stop = new Date（2018,2,9）; // 3月8日star starfruit2Start = new Date（2018,9,13）; // oct 12 var starfruit2Stop = new Date（2019,2,9）; // mar 8 var lemons1Start = new Date（2018,0,1）; // jan 1 var lemons1Stop = new Date（2018,2,1）; // feb 28 var lemons2Start = new Date（2018,10,1）; // nov 1 var lemons2Stop = new Date（2019,2,1）; // feb 28 var apricots1Start = new Date（2018,0,1）; // jan 1 var apricots1Stop = new Date（2018,1,1）; // jan 31 var apricots2Start = new Date（2018,9,1）; // oct 1 var apricots2Stop = new Date（2019,1,1）; // jan 31 var tomatoes1Start = new Date（2018,0,1）; // jan 1 var tomatoes1Stop = new Date（2018,1,1）; // jan 31 var tomatoes2Start = new Date（2018,9,1）; // oct 1 var tomatoes2Stop = new Date（2019,1,1）; // jan 31 var today = new Date（）; function yarp（）{document.body.style.background =green; document.getElementById（main）。innerHTML =you have fruit;} function narp（）{document.body.style.background =＃fffffff; document.getElementById（main）。innerHTML =nothing;} if（isSunday == 0）{document.body.style.background =＃fffffff; document.getElementById（main）。innerHTML =sunday; document.getElementById（fruit）。innerHTML =周日没有水果。; } else {if（今天> = apples1Start&&今天< = apples1Stop ||今天> = apples2Start&&今天< = apples2Stop ||今天> = apples3Start&&今天< = apples3Stop）{yarp（）; document.getElementById（fruit）。innerHTML + =apples！; } if（今天> = oranges1Start&&今天< = oranges1Stop ||今天> = oranges2Start&&今天< = oranges2Stop ||今天> = oranges3Start&&今天< = oranges3Stop） {yarp（）; document.getElementById（fruit）。innerHTML + =oranges。; } if（今天> = bananas1Start&&今天< = bananas1Stop || today> = bananas2Start&& today< = bananas2Stop）{yarp（）; document.getElementById（fruit）。innerHTML + =bananas。; } if（今天> = kiwi1Start&& today< = kiwi1Stop）{yarp（）; document.getElementById（fruit）。innerHTML + =kiwi .fancy！; } if（今天> = papaya1Start&&今天< = papaya1Stop || today> = papaya2Start&&今天< = papaya2Stop || today> = papaya3Start&&今天< = papaya3Stop | | today> = papaya4Start&&今天< = papaya4Stop || today> = papaya5Start&& today< = papaya5Stop）{yarp（）; document.getElementById（fruit）。innerHTML + =papaya。; } if（今天> = clemantines1Start&&今天< = clemantines1Stop || today> = clemantines2Start&& today< = clemantines2Stop）{yarp（）; document.getElementById（fruit）。innerHTML + =clemantines。; } if（今天> = pears1Start&& today< = pears1Stop）{yarp（）; document.getElementById（fruit）。innerHTML + =pears。; } if（今天> = tangerines1Start&&今天< = tangerines1Stop || today> = tangerines2Start&& today< = tangerines2Stop）{yarp（）; document.getElementById（fruit）。innerHTML + =tangerines。; } if（今天> = starfruit1Start&&今天< = starfruit1Stop ||今天> = starfruit2Start&&今天< = starfruit2Stop）{yarp（）; document.getElementById（fruit）。innerHTML + =star fruit。; } if（今天> = lemons1Start&&今天< = lemons1Stop ||今天> = lemons2Start&&今天< = lemons2Stop）{yarp（）; document.getElementById（fruit）。innerHTML + =lemons。; } if（今天> = apricots1Start&&今天< = apricots1Stop ||今天> = apricots2Start&&今天< = apricots2Stop）{yarp（）; document.getElementById（fruit）。innerHTML + =apricots。; } if（今天> = tomatoes1Start&&今天< = tomatoes1Stop ||今天> = tomatoes2Start&&今天< = tomatoes2Stop）{yarp（）; document.getElementById（fruit）。innerHTML + =tomatoes。; } else {narp（）; }
#horizon {position：absolute;最高：50％; width：100％;} #content {position：absolute;上：-63px; text-align：center;宽度：100％;} #main {line-height：75px; font-size：100px;保证金：0;}
< div id =horizon > < div id =content> < h1 id =main>< / h1> < p id =fruit>< / p> < / div>< / div>
解决方案
将 if 语句分开，以便分支不相互排斥，并在测试之前设置一个带有默认值的result变量。
附注：
-
String.indexOf（str）是一种在另一个字符串中检查字符串位置
的方法。它返回搜索
字符串的索引位置，如果根本找不到字符串，则返回-1。这是一个
测试子字符串存在的好方法。 - 只在绝对必要时更新网页元素（即
设置.innerHTML）因为这是一项昂贵的操作。相反，
你可以提前准备你想要写出的字符串
然后，一旦字符串完全构建，只需将它注入
页面。 -
.innerHTML在您获取/设置的字符串包含需要解析的
HTML时使用。当你的字符串没有
包含任何HTML时，使用它是浪费的，因为你要求
HTML解析器查找并处理它不会发送到
的HTML。在这些情况下，使用.textContent因为它绕过HTML
解析器并且效率更高。
var out = document.getElementById（output）; function fruit（type）{// Set type如果是未定义的，则为空字符串type = type || ; //首先设置默认值var result =; if（type.indexOf（apples）> -1）{result =apples; } if（type.indexOf（oranges）> -1）{result + =oranges; } if（type.indexOf（bananas）> -1）{result + =bananas; } //如果结果仍然是一个空字符串，如果（！result）{result =nothing; } //现在写出变量的最终值//并且在编写HTML时只使用.innerHTML，否则，使用.textContent out.textContent = result; }水果（）; //我的水果篮有：无果实（苹果）; //我的水果篮有：applefruit（oranges）; //我的水果篮有：橙子水果（香蕉）; //我的水果篮有：香蕉果（苹果橘子）; //我的水果篮有：苹果橙果（苹果香蕉）; //我的水果篮有：苹果香蕉
< p id =fruit>我的水果篮有：< span id =output>< / span>< / p>
i'm trying to throw together a simple javascript page with multiple if statements. the idea is to append to a list based on the evaluation of a stack of if statements. the problem is if any one of them fails, it triggers the else statement. i only want it to trigger else in the case that all of them fail.
<p id="fruit">My fruit basket has: </p>
if (apples) {
document.getElementById("fruit").innerHTML += "apples";
}
if (oranges) {
document.getElementById("fruit").innerHTML += "oranges";
}
if (bananas) {
document.getElementById("fruit").innerHTML += "bananas";
}
else {
document.getElementById("fruit").innerHTML += "nothing";
}
when i run this and all conditions are met, i'll get:
My fruit basket has: apples oranges bananas
when i run this and no conditions are met, i'll get:
My fruit basket has: nothing
but if any one of the conditions is not met, i'll get:
My fruit basket has: apples nothing
or
My fruit basket has: apples bananas nothing
i've tried using if else, but then it quits after the first 'match'. so in the above example if i have both apples and bananas, using if else will return
My fruit basket has: apples
and not tell me i also have bananas.
question: how do i do this so the else statement is only run in the case that all if statements have failed?
EDIT i tried to make this as simple as i could, but it seems i over simplified it.
the else nothing isn't known until all the if statements have been run. that's literally it's condition: if all the ifs fail.
i tried using the OR operator and it just broke everything. in my code, what's actually happening at if (apples) is it's checking today's date to see if it falls within a range of dates. it needs to do this for a whole bunch of different fruit based on a schedule that is pretty complicated, i.e. figuring out exactly which fruit are in the basket on a given day is harder than just running the schedule against these if 'rules'.
var isSunday = new Date().getDay();
var apples1Start = new Date(2018,8,4); // sept 4, 0 == jan.
var apples1Stop = new Date(2018,8,23); // sept 22, stop dates need to be day after.
var apples2Start = new Date(2018,10,5); // nov 5
var apples2Stop = new Date(2018,10,25); // nov 24
var apples3Start = new Date(2018,10,26); // nov 26
var apples3Stop = new Date(2018,11,9); // dec 8
var oranges1Start = new Date(2018,3,30); // april 30
var oranges1Stop = new Date(2018,4,27); // may 26
var oranges2Start = new Date(2018,9,22); // oct 22
var oranges2Stop = new Date(2018,10,4); // nov 3
var oranges3Start = new Date(2018,3,28); // april 28
var oranges3Stop = new Date(2018,3,29); // april 28
var bananas1Start = new Date(2018,0,1); // jan 1
var bananas1Stop = new Date(2018,3,10); // april 9
var bananas2Start = new Date(2018,6,2); // july 2
var bananas2Stop = new Date(2019,3,11); // april 10
var kiwi1Start = new Date(2018,9,13); // oct 13
var kiwi1Stop = new Date(2018,10,25); // nov 24
var papaya1Start = new Date(2018,8,29); // sept 29
var papaya1Stop = new Date(2018,8,30); // sept 29
var papaya2Start = new Date(2018,10,1); // nov 1
var papaya2Stop = new Date(2018,10,4); // nov 3
var papaya3Start = new Date(2018,9,15); // oct 15
var papaya3Stop = new Date(2018,10,25); // nov 24
var papaya4Start = new Date(2018,10,26); // nov 26
var papaya4Stop = new Date(2018,11,9); // dec 8
var papaya5Start = new Date(2018,11,10); // dec 10
var papaya5Stop = new Date(2019,1,1); // dec 31
var clemantines1Start = new Date(2018,0,1); // jan 1
var clemantines1Stop = new Date(2018,2,1); // feb 28
var clemantines2Start = new Date(2018,9,13); // oct 13
var clemantines2Stop = new Date(2019,1,29); // feb 28
var pears1Start = new Date(2018,8,10); // sept 10
var pears1Stop = new Date(2019,0,3); // jan 2
var tangerines1Start = new Date(2018,0,1); // jan 1
var tangerines1Stop = new Date(2018,2,9); // mar 8
var tangerines2Start = new Date(2018,11,20); // dec 20
var tangerines2Stop = new Date(2019,2,9); // mar 8
var starfruit1Start = new Date(2018,0,1); // jan 1
var starfruit1Stop = new Date(2018,2,9); // mar 8
var starfruit2Start = new Date(2018,9,13); // oct 12
var starfruit2Stop = new Date(2019,2,9); // mar 8
var lemons1Start = new Date(2018,0,1); // jan 1
var lemons1Stop = new Date(2018,2,1); // feb 28
var lemons2Start = new Date(2018,10,1); // nov 1
var lemons2Stop = new Date(2019,2,1); // feb 28
var apricots1Start = new Date(2018,0,1); // jan 1
var apricots1Stop = new Date(2018,1,1); // jan 31
var apricots2Start = new Date(2018,9,1); // oct 1
var apricots2Stop = new Date(2019,1,1); // jan 31
var tomatoes1Start = new Date(2018,0,1); // jan 1
var tomatoes1Stop = new Date(2018,1,1); // jan 31
var tomatoes2Start = new Date(2018,9,1); // oct 1
var tomatoes2Stop = new Date(2019,1,1); // jan 31
var today = new Date();
function yarp() {
document.body.style.background = "green";
document.getElementById("main").innerHTML = "you have fruit";
}
function narp() {
document.body.style.background = "#ffffff";
document.getElementById("main").innerHTML = "nothing";
}
if (isSunday == 0) {
document.body.style.background = "#ffffff";
document.getElementById("main").innerHTML = "sunday";
document.getElementById("fruit").innerHTML = "no fruit on a sunday.";
}
else {
if (today >= apples1Start && today <= apples1Stop || today >= apples2Start && today <= apples2Stop || today >= apples3Start && today <= apples3Stop) {
yarp();
document.getElementById("fruit").innerHTML += "apples! ";
}
if (today >= oranges1Start && today <= oranges1Stop || today >= oranges2Start && today <= oranges2Stop || today >= oranges3Start && today <= oranges3Stop) {
yarp();
document.getElementById("fruit").innerHTML += "oranges. ";
}
if (today >= bananas1Start && today <= bananas1Stop || today >= bananas2Start && today <= bananas2Stop) {
yarp();
document.getElementById("fruit").innerHTML += "bananas. ";
}
if (today >= kiwi1Start && today <= kiwi1Stop) {
yarp();
document.getElementById("fruit").innerHTML += "kiwi. fancy! ";
}
if (today >= papaya1Start && today <= papaya1Stop || today >= papaya2Start && today <= papaya2Stop || today >= papaya3Start && today <= papaya3Stop || today >= papaya4Start && today <= papaya4Stop || today >= papaya5Start && today <= papaya5Stop) {
yarp();
document.getElementById("fruit").innerHTML += "papaya. ";
}
if (today >= clemantines1Start && today <= clemantines1Stop || today >= clemantines2Start && today <= clemantines2Stop) {
yarp();
document.getElementById("fruit").innerHTML += "clemantines. ";
}
if (today >= pears1Start && today <= pears1Stop) {
yarp();
document.getElementById("fruit").innerHTML += "pears. ";
}
if (today >= tangerines1Start && today <= tangerines1Stop || today >= tangerines2Start && today <= tangerines2Stop ) {
yarp();
document.getElementById("fruit").innerHTML += "tangerines. ";
}
if (today >= starfruit1Start && today <= starfruit1Stop || today >= starfruit2Start && today <= starfruit2Stop ) {
yarp();
document.getElementById("fruit").innerHTML += "star fruit. ";
}
if (today >= lemons1Start && today <= lemons1Stop || today >= lemons2Start && today <= lemons2Stop ) {
yarp();
document.getElementById("fruit").innerHTML += "lemons. ";
}
if (today >= apricots1Start && today <= apricots1Stop || today >= apricots2Start && today <= apricots2Stop ) {
yarp();
document.getElementById("fruit").innerHTML += "apricots. ";
}
if (today >= tomatoes1Start && today <= tomatoes1Stop || today >= tomatoes2Start && today <= tomatoes2Stop ) {
yarp();
document.getElementById("fruit").innerHTML += "tomatoes. ";
}
else {
narp();
}
}
#horizon {
position: absolute;
top: 50%;
width: 100%;
}
#content {
position: absolute;
top: -63px;
text-align: center;
width: 100%;
}
#main {
line-height: 75px;
font-size: 100px;
margin: 0;
}
<div id="horizon">
<div id="content">
<h1 id="main"></h1>
<p id="fruit"></p>
</div>
</div>
解决方案
Separate the if statements so that the branches are not mutually exclusive and set up a "result" variable with a default value prior to testing.
Side Notes:
String.indexOf(str)is a way to check for a string's position within another string. It returns the index position that the search string was found at or-1if the string wasn't found at all. It's a great way to test for the existence of a substring.- Only update the web page elements when absolutely necessary (i.e.
setting
.innerHTML) because it's an expensive operation. Instead, you can prepare what you want to write out in a string ahead of time and then, once the string is completely built, inject it into the page just once. .innerHTMLis used when the string you are getting/setting contains HTML that needs to be parsed as such. When your string doesn't contain any HTML, it's wasteful to use this because you are asking the HTML parser to look for and process HTML that it's not going to find. In these cases, use.textContentbecause it bypasses the HTML parser and is more efficient.
var out = document.getElementById("output");
function fruit(type){
// Set type to an empty string if it is undefined
type = type || "";
// Set a default value first
var result = "";
if (type.indexOf("apples") > -1) {
result = "apples";
}
if (type.indexOf("oranges") > -1) {
result += " oranges";
}
if (type.indexOf("bananas") > -1) {
result += " bananas";
}
// If the result is still an empty string, nothing correct was passed
if(!result){
result = "nothing";
}
// Now write out the final value of the variable
// and only use .innerHTML when you are writing HTML,
// otherwise, use .textContent
out.textContent = result;
}
fruit(); // My fruit basket has: nothing
fruit("apples"); // My fruit basket has: apples
fruit("oranges"); // My fruit basket has: oranges
fruit("bananas"); // My fruit basket has: bananas
fruit("apples oranges"); // My fruit basket has: apples oranges
fruit("apples bananas"); // My fruit basket has: apples bananas
<p id="fruit">My fruit basket has: <span id="output"></span></p>
这篇关于javascript：评估多个if语句而不运行else的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
