[英]WooCommerce: Add class to active payment method and keep it
I want to add the class is-checked
to the <li>
of the current selected payment method.我想将 class is-checked
添加到当前选择的付款方式的<li>
中。
The solution I came up so far is the following function:到目前为止我提出的解决方案是以下function:
add_filter( 'wp_head', 'add_class_to_active_payment' );
function add_class_to_active_payment() { ?>
<script>
jQuery(function ($) {
$(".wc_payment_method :radio").click(function() {
$(".wc_payment_method").each(function() {
$(this).toggleClass("is-checked", $(this).find(":radio:checked").length > 0);
});
});
});
</script>
<?php }
I see the added class for a second.我看到添加的 class 一秒钟。 Then the payment methods load again and the class is gone.然后付款方式再次加载,class 消失了。
I guess it has something to do with the priority of my script.我想这与我的脚本的优先级有关。 It should fire after the ajax in the payment form is ready?!付款表格中的 ajax 准备好后应该会触发吗?!
I found the following line:我发现以下行:
jQuery(document).ajaxComplete(function () {
But if I change it with my first line, the script doesn't work anymore:但是,如果我用第一行更改它,脚本就不再起作用了:
jQuery(function ($) {
Been wanting to do the same thing, and while figuring it out I came through your post, and now I've manage to solve it and thought I share.一直想做同样的事情,在弄清楚它的同时,我通过了你的帖子,现在我已经设法解决它并认为我分享了。
No need for anything in the funciton.php, I'm just using this jQuery, works like a charm...although might be a "more correct" way to do it.函数中不需要任何东西。php,我只是在使用这个 jQuery,就像一个魅力......虽然可能是一个“更正确”的方法。
$('body').on( 'updated_checkout', function() { // lets do this everytime the ajax event update_checkout goes off, which is also does when the checkout loads on inital page load and/or refreash
var $input = $('.wc_payment_method input'); // caching our input
$input.filter(':checked').parent().addClass("is-checked"); // filtering out the checked one and adding .is-active to the parten li on inital page load/refresh
$input.on('change', function () { // removing and adding our .is-active whnever there is a change
$input.parent().removeClass('is-checked');
$(this).parent().addClass('is-checked');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.