IF && Statement Javascript

Question

我希望有人能在这个问题上帮助我。我真的不知道该怎么做。我不知道在javascript中使用哪个函数。

我有一个名为"request-a-load"的表单

此表单有10个位置，可以从下拉列表中选择。这个是：“装货地点”。

它也有一个下拉选择一个“卡车大小”：小型；中型；重型。

最后一个下拉式是“容器大小”，有两个值："20‘容器；40’容器“。

在可供选择的10个装载地点中，有3个将永远不会使用“小型”或“中型”大小的卡车。“装货地点”的这三个值是：“伦敦；曼彻斯特；利物浦；”(只是一个例子)。

这就是需要发生的事情：

如果“装货地点”不是“伦敦”、“曼彻斯特”、“利物浦”和“”卡车大小“ is ”小“ OR ”中型“E 213，则显示”集装箱大小“ as "20‘容器”“

它也必须：

如果“装货地点”不是“伦敦”、“曼彻斯特”、“利物浦”和“”卡车大小“ is ”“”，则显示“集装箱大小”为"40‘集装箱“。

我的坏代码：

​

$("div.trucksize").change(function () {
                if ($(this).val() == "Small - 5 tons") {
                    $("div.containersize").val("20' Container");
                }
                if ($(this).val() == "Medium - 10 tons") {
                    $("div.containersize").val("20' Container");
                }
                  
                if ($(this).val() == "Heavy - 24 tons" && ($("div.loadingplace").val() != ["London", "Manchester", "Liverpool"]  {
                    $("div.containersize").val("40' Container");
                }
         
            });

​

我希望有人能帮我。

谢谢您抽时间见我。

Answer 1

也许您使用的库提供了div元素的下拉行为，就像标准的div元素不生成change事件一样。因此，在下面的片段中，我将使用select元素。

代码中的一些问题：

• 要检查字符串是否发生在数组中，不能仅仅与!=进行比较，而应该在现代浏览器中使用像indexOf()或includes()这样的方法；
• 您不仅应该对卡车尺寸选择中的更改做出响应，而且还应该响应位置选择，因为这也会影响集装箱大小的结果值；
• 你在城市上做的检查似乎是在错误的地方，因为你写这些城市从来没有使用“小”或“中等”。因此，您需要让城市-检查那些“小”或“中等”值被选中-这表明违反了规则；
• 当这三个城市中的一个被选中时，你可以强迫卡车尺寸“沉重”，因为在这些情况下，这似乎是唯一允许的值(尽管你问题中的信息在中是矛盾的，它也必须是部分)；
• 我想您也希望使容器大小下拉只读，以避免用户覆盖自动逻辑。

​

$('select.loadingplace,select.trucksize').change(function () {
    if ($('select.trucksize').val() == 'Heavy - 24 tons' || 
            ["London", "Manchester", "Liverpool"].indexOf($('select.loadingplace').val()) > -1) {
        $('select.containersize').val("40' Container");
        $('select.trucksize').val('Heavy - 24 tons');
    } else {
        $('select.containersize').val("20' Container");
    }    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Loading Places: 
<select class="loadingplace">
<option value="Birmingham">Birmingham</option>
<option value="Leeds">Leeds</option>
<option value="Liverpool">Liverpool</option>
<option value="London">London</option>
<option value"Manchester">Manchester</option>
</select>
<br>
Truck Size: 
<select class="trucksize">
<option value="Small - 5 tons">Small - 5 tons</option>
<option value="Medium - 10 tons">Medium - 10 tons</option>
<option value="Heavy - 24 tons">Heavy - 24 tons</option>
</select>
<br>
Container Size: 
<select class="containersize" disabled>
<option value="20' Container">20' Container</option>
<option value="40' Container">40' Container</option>
</select>

​

Answer 2

您非常接近解决方案，只需检查loadingplace值是否包含在数组中。

所以这句话：

$("div.loadingplace").val() != ["London", "Manchester", "Liverpool"]

应写为：

$.inArray($("div.loadingplace").val(), ["London", "Manchester", "Liverpool"]) === -1

$.inArray是一个函数，它在数组中搜索指定的值并返回它的索引(如果找不到-1 )，因此需要检查该值是否大于-1 (> -1)。在您的示例中，检查值是否不存在甚至更容易，因此可以执行=== -1。

在同一行中也有语法错误，只是缺少了一个结束括号。这不是一个灵丹妙药的答案，但它应该指向正确的方向。

Answer 3

避免那些令人困惑的if语句

您已经发现了一个问题，您无法弄清楚如何使一些复杂的if语句工作。理解if语句的困难是代码的问题，而不是您的问题。这些构造很难编写，也很难维护。

您希望尽快停止依赖复杂的if语句，以便在一年内支持此代码的人受益。

没有if语句的示例

我举了一个例子，说明在没有任何if语句的情况下，您是如何做到这一点的。(不是说每条if语句都是坏的。)

在本例中，包含在一个大型locations对象中的卡车和容器大小的逻辑是可用的。看看如何比if语句更容易读懂吗？容易阅读意味着错误较少。

花点时间考虑一下，当您需要更改容器大小的逻辑时，会发生什么事情。更改此对象的值不会比更改if语句逻辑更容易吗？

​

locations = {

	"London" : {								
		"Heavy":   ["40"] 
	},
	"Liverpool" : {								
		"Heavy":   ["20","40"] 
	},
	"Manchester": {
		"Small":  ["20","40"] ,
		"Medium":   ["20"] ,
		"Heavy":  ["40"] 
	},
	"Hull": {

		"Small": ["20","40"] ,
		"Medium":  ["20"] ,
		"Heavy":  ["40"] 

	},
	"Bristol": {
		"Small": ["20","40"] ,
		"Medium":  ["20"] ,
		"Heavy": ["40"]
	}
}
var containerLabels = {
	"20": "20' Container",
	"40": "40' Container"

}

$(document).ready(function() {

	$(".js-location").on("change", function(event) {
		var location = $(event.currentTarget).val();
		setTruckSizes(location);

		var truckSize = $(".js-truck").val();
		setContainerSizes(location, truckSize);
	});

	$(".js-truck").on("change", function(event) {

		var location = $(".js-location").val();
		var truckSize = $(".js-truck").val();
		setContainerSizes(location, truckSize);
	});
});

function setTruckSizes(location) {

 	var truckSizesObject = locations[location];

 	$(".js-truck").empty();

 	for (truckSize in truckSizesObject) {

		var optionEl = createOptionElement(truckSize,truckSize);
		$(".js-truck").append( optionEl );
 	};
}

function setContainerSizes(location, truckSize) {
	var containerSizesArray = locations[location][truckSize];

	$(".js-container").empty();

	for (var i=0; i<containerSizesArray.length;i++) {
		var container = containerSizesArray[i];

		var optionEl = createOptionElement(container, containerLabels[container]);
		$(".js-container").append( optionEl );
	}
}

function createOptionElement(value, label) {
	var opt = $("<option></option>");
	opt.val(value).html(label);
	return opt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
	Location: <select class="js-location">
		<option value="">Select One</option>
		<option value="London">London</option>
		<option value="Liverpool">Liverpool</option>
		<option value="Manchester">Manchester</option>		
		<option value="Hull">Hull</option>
		<option value="Bristol">Bristol</option>
	</select>	
	<br>
	Truck Size: <select class="js-truck">
		<option value="">Select One</option>
		<option value="Small">Small</option>
		<option value="Medium">Medium</option>	
		<option value="Large">Large</option>
	</select>

	<br>
	Container Size:
	<select class="js-container">	
		<option value="">-Select One</option>
		<option value="20">20&apos; Container</option>
		<option value="40">40&apos; Container</option>
	</select>
</div>

​