隐藏第二个属性选择字段,直到在Woocommerce中选择了First

时间:2018-02-16 21:20:38

标签: jquery html css wordpress woocommerce

我试图设置一个您必须先选择尺寸的产品。然后,只有在某人选择了他们的尺寸后,才会出现颜色选项。我试图使用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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您应该尝试以下(您可以点击&#34; 运行代码段&#34;查看结果)

&#13;
&#13;
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());
    });
});
&#13;
table.variations tr:nth-child(2){
	display:none;
}
&#13;
<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>
&#13;
&#13;
&#13;

经过测试和工作

  

之后你应该在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();
        }
    });
});

它应该有用......