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

Question

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

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

我想做的是：

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

下面是我的伪代码尝试

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre><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);
     
     
     */

Answer 1

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. 我独立定义了两个函数，productChange 和 categoryChange。这样，就可以在其他地方随时调用它们（比如在我设置的事件监听器中）。除了我个人更喜欢更简洁的代码 (IMO) 之外，这允许您在 categoryChange 函数中调用 productChange 函数 - 在类别的初始选择时更新瓦数值。稍后每当用户更新产品选择时调用它。
3. 我只为其中两个产品添加了案例，为任何其他产品添加了默认案例。
4. 我不确定这里的开关结构是否最好，因为您将要处理相当多的产品选择。也许最好将所有产品及其相关的瓦数一起存储在一个大对象中，这样您就可以调用瓦数 属性，而不必遍历和定义每个 product/wattage 组合在 switch 语句中。