jQuery select：option为什么当我选择选项1来显示特定字段却改为打开所有字段？

Question

我做错了什么？当我选择一个特定选项时，它不会同时打开所有特定字段吗？我唯一的解决方案是添加DRY代码

HTML

   <select type="type-switcher" name="type-switcher" id="js_type_switcher" class="product-type-switcher">
          <option value="type-switcher">Type Switcher</option>
          <option value="discs">discs</option>
          <option value="books">books</option>
          <option value="furnitures">furnitures</option>
        </select>              

而且我有一些字段，当我选择所需的选择选项时需要显示什么

 <div name="size" class="form-field hide-form-field">
        <div class="form-field">
          <span>Size:</span>
          <input type="text" name="size">
        </div>                 


<div name="weight" class="form-field hide-form-field">
        <div class="form-field">
          <span>Weight:</span>
          <input type="text" name="weight">
        </div>            

<div name="dimensions" class="form-field hide-form-field">
        <div class="form-field">
          <span>Height:</span>
          <input type="text" name="dimensions-height">
        </div>             

CSS默认情况下，字段是隐藏的

 .show-form-field {
   display: unset;
  }            

jQuery的问题是，当我为“ discs”实例执行一种切换情​​况而不是打开only磁盘属性字段时，它会打开所有字段！我唯一想到的解决方案是在每个函数中隐藏另外两个字段，但是代码变得很漂亮DRY。当我选择case'discs'时，有没有更好的解决方案，它仅打开size字段，而另两个保持隐藏。

$('.product-type-switcher').on('change', function(){

let showDiscsSize = $('div[name="size"]').addClass("show-form-field");
let showBooksWeight = $('div[name="weight"]').addClass("show-form-field");
let showFurnituresDimensions = $('div[name="dimensions"]').addClass("show-form-field");

function showDiscAttribute() {
  showDiscsSize;
  //showBooksWeight.removeClass("show-form-field");
  //showFurnituresDimensions.removeClass("show-form-field");
}
function showBooksAttribute() {
  showBooksWeight;
  //showDiscsSize.removeClass("show-form-field");
  //showFurnituresDimensions.removeClass("show-form-field");
}
function showDimensionAttribute() {
  showFurnituresDimensions;
  //showDiscsSize.removeClass("show-form-field");
  //showBooksWeight.removeClass("show-form-field");
}

  switch($(".product-type-switcher option:selected").val()) {
    case 'type-switcher':
        $(".hide-form-field").removeClass("show-form-field");
        break;
    case 'discs':
        showDiscAttribute();
        break;
    case 'books':
        showBooksAttribute();
        break;
    case 'furnitures':
        showDimensionAttribute();
        break;
    default:
  }
});            

p.s我完全是程序员的新手！

Answer 1

我必须先提出几点建议。

1. 缺少三个div关闭标签。必须先解决该问题。

以下标记缺少Diving结束标记。

<div name="size" class="form-field hide-form-field">
<div name="weight" class="form-field hide-form-field">
<div name="dimensions" class="form-field hide-form-field">

2. 在用户选择任何选项之前，输入字段应该被隐藏

   隐藏形式的场{显示：无；}

3. 发生变更事件时的..product-type-switcher应该包含在

   中

   jQuery的（ “文件”）。就绪（函数（）{

   }）;

4. 不确定“ let showDiscsSize”，“ let showBooksWeight”，“ let showFurnituresDimensions”这些代码。我移动了“ .addClass（” show-form-field“）;”直接转到相关功能。

5. 首先选择每次选项，我们必须删除当前可用的“ show-form-field”。我将此添加到on change函数中。这将重置先前显示的输入，并且只会显示与当前所选输入选项相关的输入字段。

   https://jsfiddle.net/5cpt1r0y/