Question

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

基本上我有一个开发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/。

如果有人可以帮我调试，我将永远感激不尽！

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脚本无法正常工作

1 个答案: