jQuery select:option 为什么当我选择选项一来显示特定字段时却打开了所有字段？

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>

我有一些字段，当我选择需要的 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" 而不是打开仅一个磁盘属性字段，它打开所有字段！我能想到的唯一解决方案是在每个函数中隐藏另外两个字段，但代码变得很漂亮 DRY 。当我选择 case 'discs' 时有没有更好的解决方案它只打开尺寸字段而其他两个保持隐藏。

$('.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

我必须先提出一些建议。

三个 div 结束标记丢失。必须先解决这个问题。

Div以下标签缺少结束标签。

<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">

在用户 select 之前，任何选项输入字段都应隐藏

.隐藏表单字段{ 显示：none； }
.product-type-switcher on change 事件应包含在
内
jQuery("document").ready(函数(){

});
不确定 "let showDiscsSize"、"let showBooksWeight"、"let showFurnituresDimensions" 这些代码。我移动了“.addClass("show-form-field");”直接到相关函数。
每次选项被 selected 首先我们必须删除当前可用的 "show-form-field"。我在 on change 函数中添加了这个。这将重置以前显示的输入，并且只显示与当前 selected 输入选项相关的输入字段。

https://jsfiddle.net/5cpt1r0y/

jQuery select:option 为什么当我选择选项一来显示特定字段时却打开了所有字段？

jQuery select:option why when I choice option one to show specific field but instead it open all fields?

html

jquery

dry

switch-statement

select-options