Question

我需要检测选择输入的变化并修改标签类，但它似乎没有改变。好吧，它确实发生了变化，但只有一次，而不是当你再次改变时。

$(document).ready(function(){
    var currentPayment = $(".ty-payments-list li input:checked").attr("id");
    $(".ty-payments-list li").find('label.'+currentPayment).addClass('selected');

    $('.ty-payments-list input').change(function(){
        var newPayment = $(this).attr("id");
        $(".ty-payments-list li label.selected").removeClass('selected');
        $(".ty-payments-list li").find("label."+newPayment).addClass('selected');
    });
});

HTML

<ul class="ty-payments-list">                    
            <li class="ty-payments-list__item">
                <input id="payment_1" class="ty-payments-list__checkbox cm-select-payment" type="radio" name="payment_id" value="1" checked="checked" style="display:none;">
                <div class="ty-payments-list__item-group">
                    <label for="payment_1" class="payment_1 ty-payments-list__item-title">Card </label>
                </div>
            </li>
            <li class="ty-payments-list__item">
                <input id="payment_12" class="ty-payments-list__checkbox cm-select-payment" type="radio" name="payment_id" value="12" style="display:none;">
                <div class="ty-payments-list__item-group">
                    <label for="payment_12" class="payment_12 ty-payments-list__item-title"> PayPal</label>
                </div>
            </li>
        </ul>

有没有人有任何想法？

Answer 1

有些奇怪的浏览器问题？您是否尝试在处理程序中再次显式查找所选输入，并查看它对您的行为是否有所不同？

即。而不是

    var newPayment = $(this).attr("id");

试

    var newPayment = $(".ty-payments-list li input:checked").attr("id");

Answer 2

以下是解决方案，当您更改付款方式时，它会通过ajax重新加载该部分，因此总是重置我们在JS中更改的内容，因此这是我的最终解决方案：

$(document).ready(function(){
    var currentPayment = $(".ty-payments-list li input:checked").attr("id");
    $(".ty-payments-list li").find('label.'+currentPayment).addClass('selected');

    $('.ty-payments-list li label.payment_12').click(function(){
        $('.ty-payments-list li label.payment_1').removeClass('selected');
        $('.ty-payments-list li label.payment_12').addClass('selected');
        $('.cm-checkout-place-order').text('Complete my order with PayPal');
    });

    $('.ty-payments-list li label.payment_1').click(function(){
        $('.ty-payments-list li label.payment_12').removeClass('selected');
        $('.ty-payments-list li label.payment_1').addClass('selected');
        $('.cm-checkout-place-order').text('Complete my order');
    });
});

$(document).ajaxComplete(function(event,request, settings) {
    var currentPayment = $(".ty-payments-list li input:checked").attr("id");
    $(".ty-payments-list li").find('label.'+currentPayment).addClass('selected');

    $('.ty-payments-list li label.payment_12').click(function(){
        setTimeout(function () {
            $('.ty-payments-list li label.payment_1').removeClass('selected');
            $('.ty-payments-list li label.payment_12').addClass('selected');
            $('.cm-checkout-place-order').text('Complete my order with PayPal');
        }, 1000);
    });

    $('.ty-payments-list li label.payment_1').click(function(){
        setTimeout(function () {
            $('.ty-payments-list li label.payment_12').removeClass('selected');
            $('.ty-payments-list li label.payment_1').addClass('selected');
            $('.cm-checkout-place-order').text('Complete my order');
        }, 1000);
    });
});

根据输入更改无法更改类

2 个答案: