Question

我正在建立一个销售橱柜门的woocommerce网站。我公司为客户提供的一个选项是能够在柜门上添加定制的预钻孔。但是，如果他们没有选中“无聊”复选框，他们不希望客户看到所有自定义选项。所以我尝试制作一个jQuery文件来隐藏并显示表单元素，具体取决于要检查的复选框。虽然我相信我正确地将文件排入我的网站，但它似乎并没有影响元素，并且控制台没有显示任何错误。我正在使用WooCommerce产品附加插件，它允许复选框添加到产品的总价格而不影响价格/平方。英尺的产品。

以下是元素的HTML代码

<div class="required-product-addon product-addon product-addon-boring">

    <h3 class="addon-name">Boring <abbr class="required" title="Required field">*</abbr></h3>

<p class="form-row form-row-wide addon-wrap-276-boring-0-0">
    <label><input type="checkbox" class="addon addon-checkbox"  name="addon-276-boring-0[]" data-raw-price="7.50" data-price="7.5" value="yes"  /> Yes (<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>7.50</span>)</label>
</p></div>

<!--This is what I want to be hidden-->

<div class="product-addon product-addon-unit">

    <h3 class="addon-name">Unit </h3>

    <div class="addon-description"><p>Specify units for boring specs</p>

</div>

这是我在选择“addon-checkbox”时隐藏或显示元素的jQuery文件。

(function ($) {

$(".product-addon-unit").hide();
$(".addon-checkbox").click(function() {
    if($(this).is(":checked")) {
        $(".product-addon-unit").show();
    } else {
        $(".product-addon-unit").hide();
    }
});

})(jQuery);

以下是我将脚本排队的方式。

function add_checkboxjquery() {
  wp_register_script('checkboxjquery', get_template_directory_uri() . '/js/checkboxjquery.js', array('jquery'),'1.1', true);    
  wp_enqueue_script('checkboxjquery');
}

add_action( 'wp_enqueue_scripts', 'add_checkboxjquery');

这似乎没有做任何事情，也没有出现错误。我似乎无法弄清楚下一步是什么。当放入控制台时，jQuery代码可以正常工作，这让我更加困惑。以下是指向该网站产品页面的链接以供参考。先感谢您。 http://mykitchencabinetdoors.com/product/sh1000/

Jquery代码不会影响wordpress中的元素

0 个答案: