javascript - 执行 onclick 隐藏/显示功能的替代方法

Question

我有一个 javascript，下拉列表中的每个值都会隐藏/显示特定字段。

就我而言，我的下拉列表中有 17 个值。然后我根据下拉值隐藏/显示 100 个字段。

我的脚本工作正常，但问题是脚本太长了。

请检查下面我的脚本

   <script type="text/javascript">
$(document).ready(function(){
$('#inputOption_1_2').on('change',function(){
if( $(this).val()==="Apartment" ){
    //Unitinfo
$('#20').show(); //bedroom
$('#19').show(); //bathroom
$('#1176').show(); //type of floorplan
$('#1063').show(); //no. of parking
$('#1177').show(); //Indoor Area
$('#1078').show(); //Balcony Area
$('#1179').show(); //Terrace Area
$('#1191').show(); //Price
$('#1192').show(); //REF#
$('#1193').show(); //RERA #
$('#1194').hide(); //Storey
$('#1195').hide(); //Plot Area
$('#1196').hide(); //Hotel Brand
$('#1197').hide(); //Built up Area
$('#1198').hide(); //Type of use
$('#1199').hide(); //Total Capacity
$('#1200').hide(); //No of kitchen
$('#1201').hide(); //No of dining
$('#1172').hide(); //Total Area
$('#1202').hide(); //Total Built up area
$('#1203').hide(); //Total Plot Area
$('#1071').hide(); //License Authority
$('#1211').hide(); //Nature of Business
$('#1212').hide(); //Total Price
$('#1204').hide(); //Area
//Decor
$('#1000').hide(); //Furnish
$('#1084').hide(); //Decoration
$('#1085').hide(); //Kitchen Type
$('#1087').hide(); //Floor Materials
$('#1086').hide(); //Window type
$('#1088').hide(); //Window Type
$('#1091').show(); //Smart System
$('#1089').hide(); //Private Garage
$('#1013').hide(); //Private Swimming Pool
$('#1006').show(); //Built in Wardrobe
$('#1138').hide(); //BBQ Area
$('#1205').hide(); //Bathroom Type
$('#1061').hide(); //Fitted
$('#1092').hide(); //Pantry
$('#1206').hide(); //Shared Meeting Room
$('#1207').hide(); //Shared Reception
//View
$('#1080').show(); //Main Direction
$('#1136').show(); //Master Bed
$('#1137').show(); //Other Bed
$('#1167').show(); //Kitchen Direction
$('#1166').show(); //Entrance
$('#1181').show(); //Primary view
$('#1182').show(); //View from Master bed
$('#1183').show(); //View from Other bed
$('#1168').show(); //Kitchen View
//Brand
$('#1140').show(); //Cooker   
$('#1141').show(); //Fridge
$('#1142').show(); //Washing Machine
$('#1143').show(); //Dryer
$('#1144').show(); //Dishwasher
$('#1145').show(); //Floor
$('#1146').show(); //Furniture
$('#1147').show(); //Bathroom
$('#1208').hide(); //Elevator
//Status
$('#1170').show(); //Rent Status
$('#1193').show(); //Tenancy Vacating Letter
$('#1095').show(); //Vacant on transfer
$('#1148').show(); //Rent Period
$('#1092').show(); //Expirty Date
$('#1093').show(); //Vacating Letter
$('#1094').show(); //Vacating Date
//Building Info
$('#1057').show(); //Building Name
$('#7').hide(); //Community
$('#1187').hide(); //Sub Community
$('#1186').show(); //Master Community
$('#1003').hide(); //Developer
$('#1044').hide(); //Year Completion
$('#1209').hide(); //Community Management 
$('#1169').show(); //Building Management
$('#1005').show(); //Annual Service Charge
$('#1101').hide(); //Cooling System
$('#1002').hide(); //Cooker Type
$('#1103').hide(); //Total Floors
$('#1104').hide(); //Building Heigts
$('#1105').hide(); //Building Color
$('#1106').hide(); //Ext Material
}
else if.....
</script>

下面是我的html

<div class="col-lg-3" id="<?php echo $val_option['id']; ?>">
                <label class="control-label"><?php echo $required_notice . $val_option['option'] ?><?php if(!empty($options_lang[$key][$key_option]->hint)):?><i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i><?php endif;?></label>

                <div class="controls" >
                    <?php echo form_input('option' . $val_option['id'] . '_' . $key, set_value('option' . $val_option['id'] . '_' . $key, isset($estate['option' . $val_option['id'] . '_' . $key]) ? $estate['option' . $val_option['id'] . '_' . $key] : ''), 'class="form-control ' . $val_option['type'] . '" id="inputOption_' . $key . '_' . $val_option['id'] . '" placeholder="' . $val_option['option'] . '" ' . $required_text . ' ' . $max_length_text) ?>


                </div>
                </div>

注意:我使用 div id $val_optiond['id'] 隐藏我的字段 有人有建议/替代方法来执行此功能吗？

因为我认为这种方法需要时间来做和维护。

谢谢!

Answer 1

获得更短的 js 函数的一种解决方案如下:

var fieldIds = [20, 19, 1176, 1063, ..., 1194, 1195, ...];

var visiblityData = {
  "Apartment": [1,0,1,...], //according to fieldIds, first item determines visibility of first fieldId (#20), ...
  "House": [0,1,1,...], //these data could also be stated as a string "011..."
  ...
};

$('#inputOption_1_2').on('change',function(){

    var vis = visiblityData[$(this).val()]; //eg: visiblityData["Apartment"]
    for (var i = 0; i < fieldIds.length; i++) //loop through the fields
    {
        var f = "#" + fieldIds[i]; //eg '#20', '#19', '#1176' ...
        $(f).toggle(vis[i]==1); //equal to: if (vis[i]) $(f).show(); else $(f).hide();
    }

});

---

这是一个有效的演示:

var fieldIds = [20, 19, 1176, 1194];

var visiblityData_1_2 = {
  "All": [1,1,1,1], //according to fieldIds, first item determines visibility of first fieldId (#20), ...
  "Apartment": [0,0,1,1], //these data could also be stated as a string "1010..."
  "House": [1,0,1,0], 
};

var visiblityData_1_10 = { //this is for second drop down
  "All": [1,1,1,1],
  "Rent": [1,0,0,1], // only 20, 1194 will be visible
};


$('#inputOption_1_2').on('change', function(){
    var vis = visiblityData_1_2[$(this).val()]; //eg: visiblityData["Apartment"]
    for (var i = 0; i < fieldIds.length; i++) //loop through the fields
    {
        $("#" + fieldIds[i]).toggle( vis[i] == 1 ); //if (vis[i]) $(f).show(); else $(f).hide();
    }
});

$('#inputOption_1_10').on('change', function(){
    var vis = visiblityData_1_10[$(this).val()]; //eg: visiblityData["Rent"]
    for (var i = 0; i < fieldIds.length; i++) //loop through the fields
    {
        $("#" + fieldIds[i]).toggle( vis[i] == 1 ); 
    }
});

$('#inputOption_1_2').change();

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<select id="inputOption_1_2">
  <option value="All">All Items</option>
  <option value="Apartment">Apartment</option>
  <option value="House">House</option>
</select>

<select id="inputOption_1_10">
  <option value="All">All Items</option>
  <option value="Rent">Rent</option>
</select>

<div id="20">20</div>
<div id="19">19</div>
<div id="1176">1176</div>
<div id="1194">1194</div>