jQuery/Javascript的方法來顯示/隱藏多個字段的選擇與多個選擇的公共字段

Question

我有一個表單有多個字段，其中一些只顯示某個選擇時，這是很容易做，但我在哪裏我我掙扎的是當我有共同的領域，這些領域在不同的選擇上顯示很多。

我現在我可以使用獨特的類或ID的重複字段，但感覺就像做錯了。任何幫助將不勝感激，如果這是在我真的很抱歉之前被問到的，我沒有搜索過，沒有運氣。

示例代碼如下：

$('#order_type').on('change', function() { 
 
     if ($(this).val() === "plates_stepped") { 
 
     $(".stepped").show("slow"); 
 
     } else { 
 
     $("#plate_qty").val(0); 
 
     $("#plate_thickness").val(0); 
 
     $("#plate_wrong_reading").val(0); 
 
     $("#plate_right_reading").val(0); 
 
     $(".stepped").hide("slow"); 
 
     }; 
 
     if ($(this).val() === "plates_not_stepped") { 
 
     $(".not_stepped").show("slow"); 
 
     $(".common_plates").show("slow"); 
 
     } else { 
 
     $(".not_stepped").val(0); 
 
     $(".not_stepped").hide("slow"); 
 
     $(".common_plates").hide("slow"); 
 
     };

<div class="form-group row"> 
 
    <label for="order_type" class="col-3 col-form-label">What would you like us to provide?</label> 
 
    <div class="col-9"> 
 
    <select class="form-control" id="order_type" required> 
 
         <option value="0">Please select...</option> 
 
         <option value="plates_stepped">Direct - Plates (I have stepped)</option> 
 
         <option value="plates_not_stepped">Direct - Plates (Step for me)</option> 
 
         <option value="plates_remake">Direct - Plates Remake</option> 
 
         <option value="proof_only">Proof Only</option> 
 
         <option value="acme_traditional">Acme Traditional</option> 
 
        </select> 
 
    </div> 
 
</div> 
 
<div class="form-group row stepped common_plates" style="display: none;"> 
 
    <label for="plate_qty" class="col-3 col-form-label">Total Plates To Make</label> 
 
    <div class="col-9"> 
 
    <input class="form-control" type="number" placeholder="4" id="plate_qty" required> 
 
    </div> 
 
</div> 
 
<div class="row form-group radio-field is-required stepped common_plates" style="display: none;"> 
 
    <label class="col-3 col-form-label">Plates Thickness?</label> 
 
    <div class="radio custom-radio form-check-inline col-9"> 
 
    <input checked="checked" name="plate_thickness" value="1" type="radio" id="45th"> 
 
    <label for="45th">1.14mm - 45th.</label> 
 
    <input name="plate_thickness" value="2" type="radio" id="67th"> 
 
    <label for="67th">1.70mm - 67th.</label> 
 
    </div> 
 
</div> 
 
<div class="row form-group radio-field is-required stepped common_plates" style="display: none;"> 
 
    <label class="col-3 col-form-label">Mirror Plates?</label> 
 
    <div class="radio custom-radio form-check-inline col-9"> 
 
    <input checked="checked" name="plate_reading" value="1" type="radio" id="plate_right_reading"> 
 
    <label for="plate_right_reading">Right reading</label> 
 
    <input name="plate_reading" value="2" type="radio" id="plate_wrong_reading"> 
 
    <label for="plate_wrong_reading">Wrong Reading</label> 
 
    </div> 
 
</div> 
 
<div class="form-group row not_stepped" style="display: none;"> 
 
    <label for="teeth_qty" class="col-3 col-form-label">Teeth quantity</label> 
 
    <div class="col-9"> 
 
    <input class="form-control" type="number" placeholder="92" id="teeth_qty" required> 
 
    </div> 
 
</div> 
 
<div class="row form-group radio-field is-required not_stepped" style="display: none;"> 
 
    <label class="col-3 col-form-label">Gear Type</label> 
 
    <div class="radio custom-radio form-check-inline col-9"> 
 
    <input checked="checked" name="gear_type" value="1" type="radio" id="1_8cp"> 
 
    <label for="1_8cp">1/8CP</label> 
 
    <input name="gear_type" value="2" type="radio" id="31dp"> 
 
    <label for="31dp">32 DP</label> 
 
    </div> 
 
</div>

Answer 1

這是一個可能對你有幫助的僞代碼。因此，請爲您的每個div分配一個通用類。我已經分配plates-option作爲一個普通的類。

現在，每次這個div也應該有一個類名，同爲option值（檢查HTML）。一旦你做了這些事情，根據從下拉列表中選擇的值來顯示/隱藏div就變得更容易了。

$('#order_type').change(function() { 
 
    $("div.plates-options").hide(); 
 
    $("div." + $(this).val()).show(); 
 
}); 
 

 
$(document).ready(function() { 
 
    $('#order_type').trigger('change'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group row"> 
 
    <label for="order_type" class="col-3 col-form-label">What would you like us to provide?</label> 
 
    <div class="col-9"> 
 
    <select class="form-control" id="order_type" required> 
 
<option value="0">Please select...</option> 
 
<option value="plates_stepped">Direct - Plates (I have stepped)</option> 
 
<option value="plates_not_stepped">Direct - Plates (Step for me)</option> 
 
<option value="plates_remake">Direct - Plates Remake</option> 
 
<option value="proof_only">Proof Only</option> 
 
<option value="acme_traditional">Acme Traditional</option> 
 
</select> 
 
    </div> 
 
</div> 
 
<div class="form-group plates-options row plates_stepped common_plates"> 
 
    plates_stepped & common plates 
 
</div> 
 
<div class="form-group plates-options row plates_not_stepped common_plates"> 
 
    plates_not_stepped & common plates 
 
</div> 
 
<div class="form-group plates-options row plates_remake"> 
 
    plates_remake 
 
</div> 
 
<div class="form-group plates-options row proof_only"> 
 
    proof_only 
 
</div> 
 
<div class="form-group plates-options row acme_traditional common_plates"> 
 
    acme_traditional & common plates 
 
</div>

Answer 2

下面的代碼可以幫助你，需要更改條件按規定：

$('#order_type').change(function() { 
 
    if ($(this).val() == "plates_stepped") { 
 
    $(".not_stepped").val(0); 
 
    $(".not_stepped").hide("slow"); 
 
    $(".common_plates").hide("slow"); 
 
    $(".stepped").show("slow"); 
 
    } else if ($(this).val() === "plates_not_stepped") { 
 
    $("#plate_qty").val(0); 
 
    $("#plate_thickness").val(0); 
 
    $("#plate_wrong_reading").val(0); 
 
    $("#plate_right_reading").val(0); 
 
    $(".stepped").hide("slow"); 
 
    $(".not_stepped").show("slow"); 
 
    $(".common_plates").show("slow"); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group row"> 
 
    <label for="order_type" class="col-3 col-form-label">What would you like us to provide?</label> 
 
    <div class="col-9"> 
 
    <select class="form-control" id="order_type" required> 
 
          <option value="0">Please select...</option> 
 
          <option value="plates_stepped">Direct - Plates (I have stepped)</option> 
 
          <option value="plates_not_stepped">Direct - Plates (Step for me)</option> 
 
          <option value="plates_remake">Direct - Plates Remake</option> 
 
          <option value="proof_only">Proof Only</option> 
 
          <option value="acme_traditional">Acme Traditional</option> 
 
         </select> 
 
    </div> 
 
</div> 
 
<div class="form-group row stepped common_plates" style="display: none;"> 
 
    <label for="plate_qty" class="col-3 col-form-label">Total Plates To Make</label> 
 
    <div class="col-9"> 
 
    <input class="form-control" type="number" placeholder="4" id="plate_qty" required> 
 
    </div> 
 
</div> 
 
<div class="row form-group radio-field is-required stepped common_plates" style="display: none;"> 
 
    <label class="col-3 col-form-label">Plates Thickness?</label> 
 
    <div class="radio custom-radio form-check-inline col-9"> 
 
    <input checked="checked" name="plate_thickness" value="1" type="radio" id="45th"> 
 
    <label for="45th">1.14mm - 45th.</label> 
 
    <input name="plate_thickness" value="2" type="radio" id="67th"> 
 
    <label for="67th">1.70mm - 67th.</label> 
 
    </div> 
 
</div> 
 
<div class="row form-group radio-field is-required stepped common_plates" style="display: none;"> 
 
    <label class="col-3 col-form-label">Mirror Plates?</label> 
 
    <div class="radio custom-radio form-check-inline col-9"> 
 
    <input checked="checked" name="plate_reading" value="1" type="radio" id="plate_right_reading"> 
 
    <label for="plate_right_reading">Right reading</label> 
 
    <input name="plate_reading" value="2" type="radio" id="plate_wrong_reading"> 
 
    <label for="plate_wrong_reading">Wrong Reading</label> 
 
    </div> 
 
</div> 
 
<div class="form-group row not_stepped" style="display: none;"> 
 
    <label for="teeth_qty" class="col-3 col-form-label">Teeth quantity</label> 
 
    <div class="col-9"> 
 
    <input class="form-control" type="number" placeholder="92" id="teeth_qty" required> 
 
    </div> 
 
</div> 
 
<div class="row form-group radio-field is-required not_stepped" style="display: none;"> 
 
    <label class="col-3 col-form-label">Gear Type</label> 
 
    <div class="radio custom-radio form-check-inline col-9"> 
 
    <input checked="checked" name="gear_type" value="1" type="radio" id="1_8cp"> 
 
    <label for="1_8cp">1/8CP</label> 
 
    <input name="gear_type" value="2" type="radio" id="31dp"> 
 
    <label for="31dp">32 DP</label> 
 
    </div> 
 
</div>