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

这是一个非常棘手的调试工作，因为问题是在整个页面的上下文中发生的，而我很难单独地重现它。我将尽力在此处发布尽可能多的相关代码。

本质上，我有一个开发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>

想法是，当选择了付款选项单选按钮时，将显示相应的payment_box。在引用插件资产时，有一个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...

该脚本以常规方式包含在WooCommerce的我的站点脚本中，控制台中没有任何指示问题的消息，但是由于某种原因，选择了付款方式单选按钮时，不会显示相应的框。

我认为演示的唯一方法是链接到有问题的网站：http://dev.samarkanddesign.com/shop。将产品添加到购物车，然后访问http://dev.samarkanddesign.com/checkout/。

如果有人可以帮助我进行调试，我将不胜感激！

最佳答案

您缺少一个名为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>

关于javascript - 用于woocommerce的简单JQuery脚本不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29219964/