- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试做的事情的工作 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);
您会注意到一些事情:
productChange
和categoryChange
,独立。这样,它们就可以在其他地方随时调用(例如在我设置的事件监听器中)。除了我个人对更干净的代码的偏好(IMO)之外,这还允许您调用 productChange
categoryChange
内的功能功能 - 更新初始选择类别的瓦数值。稍后每当用户更新产品选择本身时就会调用它。关于javascript - 如何在 switch 语句中创建一个依赖于前一个案例的新案例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30082972/
我想知道如果一个人需要并行处理项目 A、B 和 C,其中 A 依赖于 B,B 依赖于 C,那么完美的工作流程是什么。 目前,我将所有内容都放在一个存储库中,这加快了早期开发速度。所以我的工作目录如下所
尝试测试这款外观精美的 gem - http://icelab.com.au/articles/welcome-to-the-omnisocial/ - 这 promise 可以将 Twitter 和
因为每个版本flutter_localizations来自 SDK 取决于 intl 0.17.0而 fstore 依赖于 intl ^0.16.1 , 禁止来自 SDK 的 flutter_loca
类似于Typescript: Type of a property dependent on another property within the same object我想要一种属性依赖的类型。
我需要计算分页的结果数。 演示查询 select A.order_id, IF( E.assign_date IS NOT NULL AND E.assign_dat
我的表中有一个项目列表,其中包含字段 votes_up 和 votes_down 以及其他字段。现在我想根据这两个字段的功能根据受欢迎程度订购商品。问题在于受欢迎程度的算法取决于 votes_up 的
cloud_firestore:^0.14.4firebase_auth: ^0.18.4+1smooth_star_rating: ^1.0.4地理点:^0.7.1geoflutterfire: ^
是否可以定义两个不同的 PatternLayouts 并依赖于它使用第一个或第二个的应用程序 LogLevel? 示例: 如果我使用默认的 ERROR 级别运行我的应用程序,它应该打印如下日志语句:
我有一个函数 template void frobnicate()做的东西。我需要 T 成为少数几个选择类型之一,并且我需要一些关于这些类型的信息。我通过提供特征来做到这一点: template st
我目前正在开发我的一个项目,它是一个类似于 MSPaint 的 WPF 应用程序。但是,我不使用铅笔工具或类似的工具,而是使用对象(矩形、圆形、三角形等)进行绘画。我使用 Prism 和 MVVM 模
我在 ftable 周围写了一个包装器因为我需要计算许多变量的频率和百分比的平面表: mytable <- function(...) { tab <- ftable(...,
如果可以在 Gradle 中使用来自其他项目的任务,我想尝试一下。假设 ProjectB 是一个 src/main/groovy 包含 com.MyTask 的项目,有父 ProjectA 在 Pro
我需要测试一些依赖于当前上下文的静态方法。现在,我当然可以使用 HttpContextWrapper 从我自己的代码中删除这种依赖性。问题在于我在这些方法中使用的第 3 方 API。他们依赖于 Htt
我正在尝试创建一个通用的结构,具有通用实现特征的界限。特征本身是通用的。这是在 Rust 1.49.0 中。 如果我这样做: trait Foo {} struct Baz> { x: F,
如果 Makefile 本身被更改,一个安全的赌注是将所有目标视为过时的。 有没有聪明的方法来添加这种依赖?有没有其他选择? 最佳答案 一个安全的赌注,但一个可怕的想法。示例:您正在使用 automa
我有一种情况,我需要根据远程文件在 make 中执行规则。这是我正在尝试做的一个例子(实际的 Makefile 在这里不相关的方式要复杂得多): URL = http://cdn.sstatic.ne
这是我的第一个 Spring 应用程序,所以请原谅我对此事的无知。 我在 @Autowired 依赖项上遇到 NullPoinerException。 14:08:48,415 SEVERE [com
我在编程方面没有太多经验,所以这是我的问题: 我正在尝试编写一个转换器应用程序。最后,您可以输入一个数字。然后我有两个组件UIPickerView .使用第一个组件,您可以选择输入格式(例如 °Cel
假设我在 Haxe 中有以下类: class Pair { public var first:U = null; public var second:V = null; pub
在很多与向服务器发送请求相关的问题的回答中,我看到提倡使用 Javascript/AJAX。 从某种意义上说,我仍然是一个纯粹主义者,因为我首先尝试开发无需使用 Javascript/AJAX 即可完
我是一名优秀的程序员,十分优秀!