个人中心
gpt4 book ai didi

jquery - 隐藏第二个属性选择字段，直到在 Woocommerce 中选择第一个

转载 作者：行者123 更新时间：2023-11-27 23:06:24 24 4
gpt4 key购买 nike

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

24 4 0
文章推荐： html - 如何悬停在子元素上但将背景色拉伸(stretch)到父元素？
文章推荐： css - 为什么具有z-index值的元素不能覆盖其子级？
文章推荐： c++ - 为什么我不能运行 C++11？
文章推荐： javascript - 如何保持对象的属性与java脚本中给定对象的顺序相同？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com