避免混淆if语句

Question

我希望有人可以帮我解决这个问题。我字面上不知道该怎么做。我不知道在javascript中使用哪个函数。

我有一个名为“request-a-load”

的表单

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

它还有一个下拉菜单来选择“卡车尺寸”：小;介质;重。

最后一个下拉列表是“Container Size”，有2个值：“20'Container; 40'Container”。

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

这是需要发生的事情：

将“容器尺寸”显示为“20'容器”如果“正在加载地点”不是“伦敦”，“曼彻斯特”， “利物浦”和“卡车尺寸” “小”或“中等”

还必须：

将“容器大小”显示为“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

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

所以这一行：

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

应写成：

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

$.inArray是一个函数，它在数组中搜索指定的值并返回其索引（如果未找到则返回-1） - 因此需要检查该值是否大于-1（{{1 }}）。在你的情况下，它更容易，因为你想检查值是否不存在，所以你可以> -1。

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

Answer 2

也许您使用为div元素提供下拉行为的库，因为标准HTML 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 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&apos; Container",
	"40": "40&apos; 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>

Answer 4

这不应该太难。

好的，

三个下拉菜单 -

位置
卡车尺寸
容器尺寸

集装箱尺寸似乎取决于位置和货车尺寸。

我想把它抽象成一个函数 - getContainerSize -

var currentLocation = $('#location').val();
var currentTruckSize = $('#truckSize').val();
// Check if its a unique city.
var isInUniqueCities = ["London", "Manchester", "Liverpool"].indexOf(currentLocation) !== -1; 
if (!isInUniqueCities && ['Small', 'Medium'].indexOf(currentTruckSize) === -1) {
  return '20 Container'
}

if (!isInUniqueCities && currentTruckSize === 'Large') {
  return '40 Container';
} 

// Handle other conditions, your question seems to be incomplete.

然后，您应该在位置和卡车尺寸下拉列表的change事件中调用此功能，以确保工作正常。

IF＆amp;＆amp;声明Javascript

4 个答案:

避免混淆if语句

没有if语句的示例