jQuery 选择：选项为什么当我选择选项一来显示特定字段但它打开所有字段时？答案

【问题标题】：jQuery select:option why when I choice option one to show specific field but instead it open all fields?jQuery 选择：选项为什么当我选择选项一来显示特定字段但它打开所有字段时？
【发布时间】：2020-01-27 01:38:47
【问题描述】：

我做错了什么？当我选择一个特定选项时是否有解决方案，它只打开该特定字段而不是同时打开？我唯一的解决方案是添加 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 。当我选择案例“光盘”时是否有更好的解决方案，它只打开大小字段而另外两个保持隐藏。

$('.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 我完全是程序员的初学者！

【问题讨论】：

标签： jquery html switch-statement dry select-options

【解决方案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">

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

.hide-form-field{ 显示：无； }
.product-type-switcher on change 事件应包含在
中
jQuery("document").ready(function(){

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

https://jsfiddle.net/5cpt1r0y/

【讨论】：