我正在尝试设置一个必须首先选择尺寸的产品。只有在有人选择了尺寸后才会出现颜色选项。我正在尝试使用 example I found ，但我很难瞄准目标。如有任何建议，我们将不胜感激!
$(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>最佳答案
您应该尝试以下操作(您可以点击“运行代码片段”来查看结果):
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>经过测试并有效
You should remove this testing lines afterwards on jQuery:
// Testing output (to be removed) console.log($(this).val());
更新，因为您正在使用一些显示样本并隐藏选择字段的插件(或一些自定义代码)，您应该必须通过以下方式替换此工作答案中的 javascript/jQuery 代码:
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();
}
});
});
应该可以...
关于jquery - 隐藏第二个属性选择字段，直到在 Woocommerce 中选择第一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48835023/