隐藏第二个属性选择字段，直到在Woocommerce中选择“第一个"为止 [英] Hide second attribute select field until First has been selected in Woocommerce
本文介绍了隐藏第二个属性选择字段，直到在Woocommerce中选择“第一个"为止的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试设置一种产品，您必须首先选择尺寸.然后，只有在选择了其大小之后，才会显示颜色选项.我正在尝试使用一个我找到的示例，但是我很难定位目标.任何建议表示赞赏！
I'm trying to set up a product where you have to choose the size first. Then only after someone has selected their size will the color option appear. I'm trying to use an example I found, but am having a hard time targeting things. Any advice is appreciated!
$(function() {
$('table.variations tr:nth-child(1)').hide();
});
$('body').on('click','table.variations tr:first-child .select-option', function(e) {
$('table.variations').show();
e.preventDefault();
});
table.variations tr:nth-child(2){
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label"><label for="pa_size">Size</label></td>
<td class="value">
<div id="picker_pa_size" class="select swatch-control">
<select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size">
<option value="">Choose an option</option>
<option value="small" >(Small) Fits DD Small, Starbucks Grande, McD’s Small, and other popular brands.</option>
<option value="medium" >(Medium) Fits DD Medium, Starbucks Venti, McD’s Medium, and other popular brands.</option>
<option value="large" >(Large) Fits DD Large, Starbucks Trenta, McD’s Large, and other popular brands.</option>
</select>
<div class="select-option swatch-wrapper" data-attribute="pa_size" data-value="small">
<a href="#" style="width:300px;height:0px;" title="(Small) Fits DD Small, Starbucks Grande, McD’s Small, and other popular brands." class="swatch-anchor"><img src="https://javasok.wpengine.com/wp-content/uploads/sm.png" alt="" class="wp-post-image swatch-photopa_size_ swatch-img" width="300" height="0"/></a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_size" data-value="medium">
<a href="#" style="width:300px;height:0px;" title="(Medium) Fits DD Medium, Starbucks Venti, McD’s Medium, and other popular brands." class="swatch-anchor">
<img src="https://javasok.wpengine.com/wp-content/uploads/md.png" alt="" class="wp-post-image swatch-photopa_size_ swatch-img" width="300" height="0"/>
</a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_size" data-value="large">
<a href="#" style="width:300px;height:0px;" title="(Large) Fits DD Large, Starbucks Trenta, McD’s Large, and other popular brands." class="swatch-anchor">
<img src="https://javasok.wpengine.com/wp-content/uploads/lg.png" alt="" class="wp-post-image swatch-photopa_size_ swatch-img" width="300" height="0"/>
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="label"><label for="pa_color">Color</label></td>
<td class="value">
<div id="picker_pa_color" class="select swatch-control">
<select id="pa_color" class="" name="attribute_pa_color" data-attribute_name="attribute_pa_color">
<option value="">Choose an option</option>
<option value="black" >Black</option>
<option value="blue" >Blue</option>
<option value="bright-pink" >Bright Pink</option>
<option value="green" >Green</option>
<option value="green-camo" >Green Camo</option>
<option value="light-blue" >Light Blue</option>
<option value="red" >Red</option>
</select>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="black">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#1d2120;" title="Black" class="swatch-anchor">Black</a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="blue">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#002a61;" title="Blue" class="swatch-anchor">Blue</a></div>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="bright-pink">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#d95183;" title="Bright Pink" class="swatch-anchor">Bright Pink</a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="green">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#486325;" title="Green" class="swatch-anchor">Green</a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="green-camo">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#2d3320;" title="Green Camo" class="swatch-anchor">Green Camo</a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="light-blue">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#0084a5;" title="Light Blue" class="swatch-anchor">Light Blue</a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="red">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#a62c28;" title="Red" class="swatch-anchor">Red</a>
</div>
</div>
<a class="reset_variations" href="#">Clear</a>
</td>
</tr>
</tbody>
</table>
推荐答案
您应该尝试以下(您可以点击"运行代码段"查看结果):
You should try the following (you can click on "Run code snippet" to see the result):
jQuery(function($) {
$('body').on( 'change', 'table.variations select#pa_size', function(){
if( $(this).val() != '' )
$('table.variations tr:nth-child(2)').show();
else
$('table.variations tr:nth-child(2)').hide();
// Testing output (to be removed)
console.log($(this).val());
});
});
table.variations tr:nth-child(2){
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label"><label for="pa_size">Size</label></td>
<td class="value">
<div id="picker_pa_size" class="select swatch-control">
<select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size">
<option value="">Choose an option</option>
<option value="small" >(Small) Fits DD Small, Starbucks Grande, McD’s Small, and other popular brands.</option>
<option value="medium" >(Medium) Fits DD Medium, Starbucks Venti, McD’s Medium, and other popular brands.</option>
<option value="large" >(Large) Fits DD Large, Starbucks Trenta, McD’s Large, and other popular brands.</option>
</select>
<div class="select-option swatch-wrapper" data-attribute="pa_size" data-value="small">
<a href="#" style="width:300px;height:0px;" title="(Small) Fits DD Small, Starbucks Grande, McD’s Small, and other popular brands." class="swatch-anchor"><img src="https://javasok.wpengine.com/wp-content/uploads/sm.png" alt="" class="wp-post-image swatch-photopa_size_ swatch-img" width="300" height="0"/></a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_size" data-value="medium">
<a href="#" style="width:300px;height:0px;" title="(Medium) Fits DD Medium, Starbucks Venti, McD’s Medium, and other popular brands." class="swatch-anchor">
<img src="https://javasok.wpengine.com/wp-content/uploads/md.png" alt="" class="wp-post-image swatch-photopa_size_ swatch-img" width="300" height="0"/>
</a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_size" data-value="large">
<a href="#" style="width:300px;height:0px;" title="(Large) Fits DD Large, Starbucks Trenta, McD’s Large, and other popular brands." class="swatch-anchor">
<img src="https://javasok.wpengine.com/wp-content/uploads/lg.png" alt="" class="wp-post-image swatch-photopa_size_ swatch-img" width="300" height="0"/>
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="label"><label for="pa_color">Color</label></td>
<td class="value">
<div id="picker_pa_color" class="select swatch-control">
<select id="pa_color" class="" name="attribute_pa_color" data-attribute_name="attribute_pa_color">
<option value="">Choose an option</option>
<option value="black" >Black</option>
<option value="blue" >Blue</option>
<option value="bright-pink" >Bright Pink</option>
<option value="green" >Green</option>
<option value="green-camo" >Green Camo</option>
<option value="light-blue" >Light Blue</option>
<option value="red" >Red</option>
</select>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="black">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#1d2120;" title="Black" class="swatch-anchor">Black</a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="blue">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#002a61;" title="Blue" class="swatch-anchor">Blue</a></div>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="bright-pink">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#d95183;" title="Bright Pink" class="swatch-anchor">Bright Pink</a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="green">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#486325;" title="Green" class="swatch-anchor">Green</a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="green-camo">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#2d3320;" title="Green Camo" class="swatch-anchor">Green Camo</a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="light-blue">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#0084a5;" title="Light Blue" class="swatch-anchor">Light Blue</a>
</div>
<div class="select-option swatch-wrapper" data-attribute="pa_color" data-value="red">
<a href="#" style="text-indent:-9999px;width:32px;height:32px;background-color:#a62c28;" title="Red" class="swatch-anchor">Red</a>
</div>
</div>
<a class="reset_variations" href="#">Clear</a>
</td>
</tr>
</tbody>
</table>
经过测试并有效
您之后应在jQuery上删除以下测试行:
You should remove this testing lines afterwards on jQuery:
// Testing output (to be removed)
console.log($(this).val());
在您使用一些显示色板并隐藏选择字段(或一些自定义代码)的插件时进行更新，您必须在此工作答案中用以下方式替换javascript/jQuery代码:
Update as you are using some a plugin that displays swatches and hide select fields (or some custom code), you should have to replace the javascript/jQuery code in this working answer by:
jQuery(function($) {
$( 'div.select-option[data-attribute="pa_size"]').click( function(){
if($(this).hasClass('selected')){
$('table.variations tr:nth-child(2)').hide();
} else {
$('table.variations tr:nth-child(2)').show();
}
});
});
它应该可以工作...
It should work…
这篇关于隐藏第二个属性选择字段，直到在Woocommerce中选择“第一个"为止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
