用于 woocommerce 的简单 JQuery 脚本不起作用

Question

调试起来非常棘手，因为问题发生在整个页面的上下文中，我很难单独重现它。不过，我会在这里尝试 post 尽可能多的相关代码。

基本上我有一个开发的 WooCommerce WordPress 商店，我为其构建了一个自定义主题。在结帐页面上有标准的付款选项选择，标记如下：

<ul class="payment_methods methods">
    <li class="payment_method_bacs">
        <div class="radio">
            <label for="payment_method_bacs">
                <input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" checked='checked' data-order_button_text="" />Direct Bank Transfer</label>
        </div>
        <div class="panel panel-default payment_box payment_method_bacs">
            <div class="panel-body">
                <p>Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won&#8217;t be shipped until the funds have cleared in our account.</p>
            </div>
        </div>
    </li>
    <li class="payment_method_cheque">
        <div class="radio">
            <label for="payment_method_cheque">
                <input id="payment_method_cheque" type="radio" class="input-radio" name="payment_method" value="cheque" data-order_button_text="" />Cheque Payment</label>
        </div>
        <div class="panel panel-default payment_box payment_method_cheque" style="display:none;">
            <div class="panel-body">
                <p>Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</p>
            </div>
        </div>
    </li>
</ul>

The idea is that when a payment option radio button is selected the corresponding payment_box is shown.在提到插件资产时，有一个 jQuery snippet 实现了这一点：

payment_method_selected: function( e ) {
            if ( $( '.payment_methods input.input-radio' ).length > 1 ) {
                var target_payment_box = $( 'div.payment_box.' + $( this ).attr( 'ID' ) );

                if ( $( this ).is( ':checked' ) && ! target_payment_box.is( ':visible' ) ) {
                    $( 'div.payment_box' ).filter( ':visible' ).slideUp( 250 );

                    if ( $( this ).is( ':checked' ) ) {
                        $( 'div.payment_box.' + $( this ).attr( 'ID' ) ).slideDown( 250 );
                    }
                }
            } else {
                $( 'div.payment_box' ).show();
            } //etc...

This script is included in my site scripts by WooCommerce in the normal way and there is nothing in the console indicating a problem but for some reason when a payment method radio is selected its corresponding box does not show.

我认为唯一的演示方法是 link 到有问题的站点：http://dev.samarkanddesign.com/shop. Add a product to cart and visit http://dev.samarkanddesign.com/checkout/.

如果有人能帮我调试这个，我将不胜感激！

Answer 1

您缺少一个名为 order_review 的 div。如果您注意到您发布的方法被此代码调用 here：

this.$order_review.on( 'click', 'input[name=payment_method]', this.payment_method_selected );

并且属性 this.$order_review 定义为 here.

所以现在在您的结帐页面上有这样的东西：

<h3 id="order_review_heading">Your order</h3>
<table class="shop_table woocommerce-checkout-review-order-table table">
    ...
</table>
<div id="payment" class="woocommerce-checkout-payment">
    ...
</div>

相反，从 Woothemes 的演示网站来看，它应该是这样的：

<h3 id="order_review_heading">Your order</h3>
<div id="order_review" class="woocommerce-checkout-review-order">
    <table class="shop_table woocommerce-checkout-review-order-table">
        ...
    </table>
    <div id="payment" class="woocommerce-checkout-payment">
        ...
    </div>
</div>

用于 woocommerce 的简单 JQuery 脚本不起作用

Simple JQuery Script for woocommerce not working

javascript

wordpress

jquery

woocommerce