我正在试着设计一个你必须先选择尺寸的产品。只有当有人选择了他们的尺寸后,颜色选项才会出现。我试图使用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>

测试和工作
您应该在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();
        }
    });
});

它应该有用…

10-05 22:36
查看更多