gpt4 book ai didi

javascript - 如何在 switch 语句中创建一个依赖于前一个案例的新案例

转载 作者:行者123 更新时间:2023-11-28 00:20:27 24 4
gpt4 key购买 nike

我正在尝试做的事情的工作 fiddle : https://jsfiddle.net/wymn7g6s/

类别和产品下拉列表使用 switch 语句进行工作。

我想做的是:

添加一个名为瓦数的新案例。用户选择一个产品,每次都会显示该产品的相应瓦数。

下面是我对伪代码的尝试

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> function configureDropDownLists(category, products) {
//var appliances = {
//refrigerators: [ 'Artic King AEB', 'Artic King ATMA', 'Avanti Compact', 'Bosch SS'],

//dishWasher: ['Bosch - SHXUC', 'Asko DS', 'Blomberg', 'Amana']
// }


var refrigerators = new Array('Artic King AEB', 'Artic King ATMA', 'Avanti Compact', 'Bosch SS');
var dishWasher = new Array('Bosch - SHXUC', 'Asko DS', 'Blomberg', 'Amana');


switch (category.value) {
case 'refrigerators':
products.options.length = 0;
for (i = 0; i < refrigerators.length; i++) {
createOption(products, refrigerators[i], refrigerators[i]);
}
break;
case 'dishWasher':
products.options.length = 0;
for (i = 0; i < dishWasher.length; i++) {
createOption(products, dishWasher[i], dishWasher[i]);
}
break;

default:
products.options.length = 0;
break;
}



}


function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}



/*

Added on MAY 6th 1:29 PM

Store and display Wattage based on the product selected

1) Define wattage array

2) get wattage array

3) Check for which product is selected and accordingly display the Wattage. This has to happen onChange of the products dropdown.



// define wattage array
var wattageArray = localStorage {
Artic King AEB: 270,
Artic King ATMA: 311,
Avanti Compact:340,
Bosch SS: 214,
Bosch - SHXUC: 200,
Asko DS: 187,
Blomberg: 236,
Amana: 150
};




function getWattageArray() {

var wattageArray = getWattageArray();

// loop and check for key, value

for (var i = 0; i < wattageArray.length; i++) {
var key = wattageArray[i];
var value = wattageArray[i];

var wattageArray = localStorage.getItem("wattageArray");

// check for products drop down and compare it to wattage
for (options.selectedIndex == wattageArray) {

// display using innerHTML. Parse it since it is an integer
var value = parseInt(localStorage.getItem[i]));
document.getElementById("wattage").innerHTML = value;
}
}
SIMPLE SET and DISPLAY TO SEE IF LOCAL STORAGE WORKS

//localStorage.setItem("Artic King AEB",270);
//localStorage.setItem("Artic King ATMA",311);

//localStorage.setItem("Avanti Compact",340);
//localStorage.setItem("Bosch SS",214);
//localStorage.setItem("Bosch - SHXUC",200);

//localStorage.setItem("Asko DS",187);
//localStorage.setItem("Blomberg",236);
//localStorage.setItem("Amana",150);

//var sticky = parseInt(localStorage.getItem("Blomberg"));
//alert(sticky);







function estimatedDailyUse(dailyUse){

var button = document.getElementsByTagName("button");
console.log(button);

if(button.onclick.id =="h1"){
return dailyUse = 1;
alert("You clicked one");
console.log("hi");
}

else if (button.onclick.id =="h3"){
return dailyUse = 3;

}

else if (button.onclick.id =="h6"){
return dailyUse = 6;


}
else if (button.onclick.id =="h24"){
return dailyUse = 24;
}

}

/*

function selectOption(ddl,text,value){

document.getElementById("product").onchange = function() {
this.selectedIndex ==selected;
}
}

if(category.value == selected){

}


if so and so option is selected in Category
make that option as selected
populate products

if so and so option is selected by user in products
make that option as selected
display wattage



}

$(function() {
var categoryValue = localStorage.getItem("categoryValue");
if(categoryValue != null) {
$("select[name=ddl]").val(categoryValue);
}

$("select[name=ddl]").on("change", function() {
localStorage.setItem("categoryValue", $(this).val());
});
})



*/

/*

How to store and display Wattage based on the product selected

1) Define wattage array

2) get wattage array

3) Check for which product is selected and accordingly display the Wattage. This has to happen onChange of the products dropdown.



// define wattage array
var wattageArray = localStorage {
Artic King AEB: 270,
Artic King ATMA: 311,
Avanti Compact:340,
Bosch SS: 214,
Bosch - SHXUC: 200,
Asko DS: 187,
Blomberg: 236,
Amana: 150
};

// call wattage array inside init

window.onload = init;

function init() {

//options.onchange = displayWattage;

var wattageArray = getWattageArray();

for (var i = 0; i < wattageArray.length; i++) {
var key = wattageArray[i];
var value = wattageArray[i];

}
}

function getWattageArray() {
var wattageArray = localStorage.getItem("wattageArray");

for (options.selectedIndex == wattageArray) {

var value = parseInt(localStorage.getItem[i]));
document.getElementById("wattage").innerHTML = value;
}
}
SIMPLE SET and DISPLAY TO SEE IF LOCAL STORAGE WORKS

//localStorage.setItem("Artic King AEB",270);
//localStorage.setItem("Artic King ATMA",311);

//localStorage.setItem("Avanti Compact",340);
//localStorage.setItem("Bosch SS",214);
//localStorage.setItem("Bosch - SHXUC",200);

//localStorage.setItem("Asko DS",187);
//localStorage.setItem("Blomberg",236);
//localStorage.setItem("Amana",150);

//var sticky = parseInt(localStorage.getItem("Blomberg"));
//alert(sticky);


*/</code></pre>
</div>
</div>

另外,我如何保持下拉列表的选择状态(一旦用户完成了产品的选择。)

谢谢

最佳答案

This should be pretty close to what you're looking for 。正如我在上面的评论中所说,您必须重新考虑如何构建这些功能。 configureDropDownLists您创建的函数仅在类别更改时才会被调用。如果您希望在选择新产品时改变瓦数,则需要将其放入一个单独的函数中,该函数在产品值更新时执行。

这是更新后的 JS:

var category = document.getElementById('ddl'),
product = document.getElementById('products'),
wattage = document.getElementById('wattage'),
refrigerators = new Array('Artic King AEB', 'Artic King ATMA', 'Avanti Compact', 'Bosch SS'),
dishWasher = new Array('Bosch - SHXUC', 'Asko DS', 'Blomberg', 'Amana');

var productChange = function() {
switch (product.value) {
case 'Artic King AEB':
wattage.innerHTML = 400;
break;
case 'Artic King ATMA':
wattage.innerHTML = 500;
break;
default:
wattage.innerHTML = 'N/A'
break;
}
}

var categoryChange = function() {
switch (category.value) {
case 'refrigerators':
products.options.length = 0;
for (i = 0; i < refrigerators.length; i++) {
createOption(products, refrigerators[i], refrigerators[i]);
}
break;
case 'dishWasher':
products.options.length = 0;
for (i = 0; i < dishWasher.length; i++) {
createOption(products, dishWasher[i], dishWasher[i]);
}
break;
default:
products.options.length = 0;
break;
}

productChange();
}

function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}

category.addEventListener('change', categoryChange);

product.addEventListener('change', productChange);

您会注意到一些事情:

  1. 我重组了代码,以便在函数外部定义变量。没有理由在每次调用这些函数时重新创建新的局部变量 - 它们不会改变。
  2. 我定义了两个函数,productChangecategoryChange ,独立。这样,它们就可以在其他地方随时调用(例如在我设置的事件监听器中)。除了我个人对更干净的代码的偏好(IMO)之外,这还允许您调用 productChange categoryChange内的功能功能 - 更新初始选择类别的瓦数值。稍后每当用户更新产品选择本身时就会调用它。
  3. 我只为其中两种产品添加了案例,并为任何其他产品添加了默认案例。
  4. 我不确定这里的开关结构是否最好,因为您将要处理相当多的产品选择。也许最好将所有产品及其相关瓦数一起存储在一个大对象中,这样您就可以调用瓦数属性,而不必在 switch 语句中遍历和定义每个产品/瓦数组合。

关于javascript - 如何在 switch 语句中创建一个依赖于前一个案例的新案例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30082972/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com