努力使用条件语句 show/hide wordpress 表单上的多个字段
struggling with conditional statements to show/hide multiple fields on a wordpress form
我的目标是在 woocommerce 产品页面上有一个表单,当某个属性被选中时,会显示更多选项。
进一步来说。有一个问题:
"How many additional dogs are you purchasing for?" 并且如果 "one" 被选中,将出现带有标签的文本字段:"Second Dog's Name:"。如果选择了 "two",则会出现 "Second Dog's Name:" 和 "Third Dog's Name:"。
这是我正在使用的代码,无法真正更改 html 结构,因为它是使用 wordpress 插件构建的,用于在 woocommerce 中提供额外的产品选项。
我能够在选择第四个选项时完成此操作,它可以完成我想要的工作并显示所有三个选项,但前三个选项无能为力。但是当我编写每个代码时,它们会一直工作,直到我编写下一个代码。
$('.form-control').on('change', function () {
if(this.value === "option-1"){
$(".form-control-2_parent").show();
} else {
$(".form-control-2_parent").hide();
}
});
$('.form-control').on('change', function () {
if(this.value === "option-2"){
$(".form-control-2_parent").show();
$(".form-control-3_parent").show();
} else {
$(".form-control-2_parent").hide();
$(".form-control-3_parent").hide();
}
});
$('.form-control').on('change', function () {
if(this.value === "option-3"){
$(".form-control-2_parent").show();
$(".form-control-3_parent").show();
$(".form-control-4_parent").show();
} else {
$(".form-control-2_parent").hide();
$(".form-control-3_parent").hide();
$(".form-control-4_parent").hide();
}
});
.form-control-2_parent{
display:none;
}
.form-control-3_parent{
display:none;
}
.form-control-4_parent{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_select form-control_parent">
<label for="select-1586051219224">Number of Additional Dogs:</label>
<div class="select">
<select name="select-1586051219224" class="form-control ">
<option value="no-addtional">No Additional Dogs</option>
<option value="option-1">One Additional Dog</option>
<option value="option-2">Two Additional Dogs</option>
<option value="option-3">Three Additional Dog</option>
</select>
<div class="select_arrow"></div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_text form-control-2_parent">
<label for="text-1586038514482">Second Dog's Name</label>
<input type="text" id="text-1586038514482" class="form-control-2 " name="text-1586038514482" value="" />
</div>
<div class="wcpa_form_item wcpa_type_text form-control-3_parent">
<label for="text-1586038517583">Third Dog's Name</label>
<input type="text" id="text-1586038517583" class="form-control-3 " name="text-1586038517583" value="" /></div>
<div class="wcpa_form_item wcpa_type_text form-control-4_parent">
<label for="text-1586038516041">Fourth Dog's Name</label>
<input type="text" id="text-1586038516041" class="form-control-4 " name="text-1586038516041" value="" /></div>
我知道我缺少的可能是非常基本的,但我对编写 javascript/jquery 函数和像这样的复杂条件语句还很陌生。
在此先感谢您能给我的任何帮助!
解决方法如下:
// First store all out option's Elements on a list
var options = [
$(".form-control-2_parent"),
$(".form-control-3_parent"),
$(".form-control-4_parent")
]
// Create a function that hides all our options
function resetAll(){
options.forEach(function(option){
option.hide();
});
}
$('.form-control').on('change',
function (event)
{
// Get the option that was clicked
var target = $(event.currentTarget);
if(target.val())
{
// First Hide all our options, this will hide any open ones
resetAll();
// Just create a loop that shows the number of options based on the selected option
var i = 0;
while(i < target.val()){
options[i].show();
i++;
}
}
}
);
.form-control-2_parent{
display:none;
}
.form-control-3_parent{
display:none;
}
.form-control-4_parent{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_select form-control_parent">
<label for="select-1586051219224">Number of Additional Dogs:</label>
<div class="select">
<select name="select-1586051219224" class="form-control ">
<option value="no-addtional">No Additional Dogs</option>
<option value="1">One Additional Dog</option>
<option value="2">Two Additional Dogs</option>
<option value="3">Three Additional Dog</option>
</select>
<div class="select_arrow"></div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_text form-control-2_parent">
<label for="text-1586038514482">Second Dog's Name</label>
<input type="text" id="text-1586038514482" class="form-control-2 " name="text-1586038514482" value="" />
</div>
<div class="wcpa_form_item wcpa_type_text form-control-3_parent">
<label for="text-1586038517583">Third Dog's Name</label>
<input type="text" id="text-1586038517583" class="form-control-3 " name="text-1586038517583" value="" /></div>
<div class="wcpa_form_item wcpa_type_text form-control-4_parent">
<label for="text-1586038516041">Fourth Dog's Name</label>
<input type="text" id="text-1586038516041" class="form-control-4 " name="text-1586038516041" value="" /></div>
我的目标是在 woocommerce 产品页面上有一个表单,当某个属性被选中时,会显示更多选项。 进一步来说。有一个问题: "How many additional dogs are you purchasing for?" 并且如果 "one" 被选中,将出现带有标签的文本字段:"Second Dog's Name:"。如果选择了 "two",则会出现 "Second Dog's Name:" 和 "Third Dog's Name:"。
这是我正在使用的代码,无法真正更改 html 结构,因为它是使用 wordpress 插件构建的,用于在 woocommerce 中提供额外的产品选项。
我能够在选择第四个选项时完成此操作,它可以完成我想要的工作并显示所有三个选项,但前三个选项无能为力。但是当我编写每个代码时,它们会一直工作,直到我编写下一个代码。
$('.form-control').on('change', function () {
if(this.value === "option-1"){
$(".form-control-2_parent").show();
} else {
$(".form-control-2_parent").hide();
}
});
$('.form-control').on('change', function () {
if(this.value === "option-2"){
$(".form-control-2_parent").show();
$(".form-control-3_parent").show();
} else {
$(".form-control-2_parent").hide();
$(".form-control-3_parent").hide();
}
});
$('.form-control').on('change', function () {
if(this.value === "option-3"){
$(".form-control-2_parent").show();
$(".form-control-3_parent").show();
$(".form-control-4_parent").show();
} else {
$(".form-control-2_parent").hide();
$(".form-control-3_parent").hide();
$(".form-control-4_parent").hide();
}
});
.form-control-2_parent{
display:none;
}
.form-control-3_parent{
display:none;
}
.form-control-4_parent{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_select form-control_parent">
<label for="select-1586051219224">Number of Additional Dogs:</label>
<div class="select">
<select name="select-1586051219224" class="form-control ">
<option value="no-addtional">No Additional Dogs</option>
<option value="option-1">One Additional Dog</option>
<option value="option-2">Two Additional Dogs</option>
<option value="option-3">Three Additional Dog</option>
</select>
<div class="select_arrow"></div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_text form-control-2_parent">
<label for="text-1586038514482">Second Dog's Name</label>
<input type="text" id="text-1586038514482" class="form-control-2 " name="text-1586038514482" value="" />
</div>
<div class="wcpa_form_item wcpa_type_text form-control-3_parent">
<label for="text-1586038517583">Third Dog's Name</label>
<input type="text" id="text-1586038517583" class="form-control-3 " name="text-1586038517583" value="" /></div>
<div class="wcpa_form_item wcpa_type_text form-control-4_parent">
<label for="text-1586038516041">Fourth Dog's Name</label>
<input type="text" id="text-1586038516041" class="form-control-4 " name="text-1586038516041" value="" /></div>
我知道我缺少的可能是非常基本的,但我对编写 javascript/jquery 函数和像这样的复杂条件语句还很陌生。 在此先感谢您能给我的任何帮助!
解决方法如下:
// First store all out option's Elements on a list
var options = [
$(".form-control-2_parent"),
$(".form-control-3_parent"),
$(".form-control-4_parent")
]
// Create a function that hides all our options
function resetAll(){
options.forEach(function(option){
option.hide();
});
}
$('.form-control').on('change',
function (event)
{
// Get the option that was clicked
var target = $(event.currentTarget);
if(target.val())
{
// First Hide all our options, this will hide any open ones
resetAll();
// Just create a loop that shows the number of options based on the selected option
var i = 0;
while(i < target.val()){
options[i].show();
i++;
}
}
}
);
.form-control-2_parent{
display:none;
}
.form-control-3_parent{
display:none;
}
.form-control-4_parent{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_select form-control_parent">
<label for="select-1586051219224">Number of Additional Dogs:</label>
<div class="select">
<select name="select-1586051219224" class="form-control ">
<option value="no-addtional">No Additional Dogs</option>
<option value="1">One Additional Dog</option>
<option value="2">Two Additional Dogs</option>
<option value="3">Three Additional Dog</option>
</select>
<div class="select_arrow"></div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_text form-control-2_parent">
<label for="text-1586038514482">Second Dog's Name</label>
<input type="text" id="text-1586038514482" class="form-control-2 " name="text-1586038514482" value="" />
</div>
<div class="wcpa_form_item wcpa_type_text form-control-3_parent">
<label for="text-1586038517583">Third Dog's Name</label>
<input type="text" id="text-1586038517583" class="form-control-3 " name="text-1586038517583" value="" /></div>
<div class="wcpa_form_item wcpa_type_text form-control-4_parent">
<label for="text-1586038516041">Fourth Dog's Name</label>
<input type="text" id="text-1586038516041" class="form-control-4 " name="text-1586038516041" value="" /></div>