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>