Question

我正在使用wordpress和woocommerce来构建我的网站，并对woocommerce变量产品存在问题。

我只想在选择之前的选项后显示一个选项。

我找到了这个线程（jQuery: Conditional show an element based on drop down box selection），它解释了我完成这个过程所需的JQuery，并且我已经调整了代码以适应我的选择并让它在JSFiddle上运行。所以我知道代码可以运行。

HTML代码为：

<table class="variations" cellspacing="0">
<tbody>
    <tr>
        <td class="label">
            <label for="pa_slat-material">Slat Material</label>
        </td>
        <td class="value">
            <select id="pa_slat-material" name="attribute_pa_slat-material">
                <option value="">Choose an option…</option>
                <option value="treated-redwood" class="active">Treated Redwood</option>
                <option value="douglas-fir" class="active">Douglas Fir</option>
                <option value="hardwood-iroko" class="active">Hardwood Iroko</option>
                <option value="recycled-plastic" class="active">Recycled Plastic</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="label">
            <label for="pa_rp-colour">Recycled Plastic Colour</label>
        </td>
        <td class="value">
            <select id="pa_rp-colour" name="attribute_pa_rp-colour">
                <option value="">Choose an option…</option>
                <option value="black" class="active">Black</option>
                <option value="grey" class="active">Grey</option>
                <option value="brown" class="active">Brown</option>
                <option value="green" class="active">Green</option>
            </select>
        </td>
    </tr>
</tbody>

和JS是：

$(document).ready(function () {
var $recycledplasticTr = $('#pa_rp-colour').closest('tr').hide();

$('#pa_slat-material').change(function () {
    var selectedValue = $(this).val();

    if (selectedValue === 'recycled-plastic') {
        $recycledplasticTr.show();
    } else {
        $recycledplasticTr.hide();
    }
});
});

但是现在我不知道在哪里放置它以便在我的网站上实现它？我可以将它添加到functions.php吗？

或

我是否需要将其直接添加到处理此表单的模板页面？

我可以感觉到我很接近，但却错过了别人的一些简单而不是我。

Answer 1

创建一个新的scripts.js文件，在该文件中添加以下代码

jQuery(document).ready(function($) {
    var $recycledplasticTr = $('#pa_rp-colour').closest('tr').hide();

    $('#pa_slat-material').change(function () {
       var selectedValue = $(this).val();

       if (selectedValue === 'recycled-plastic') {
           $recycledplasticTr.show();
       } else {
           $recycledplasticTr.hide();
       }
    });

    //any other jquery codes

});

将此文件上传到您的主题，并在主题的function.php中使用wp_enqueue_script

条件JQuery根据选择显示选择

1 个答案: