javascript - WooCommerce 显示 "used for variations"复选框(自定义产品类型)

Question

我创建了一个名为 vp_extended 的自定义变量产品类型。默认情况下，当我添加名为“大小”的属性时，“用于变体”复选框不会显示在属性下。所以当我添加以下代码时:

<?php
function producttype_custom_js() {

    if ( 'product' != get_post_type() ) :
        return;
    endif;
?>
   <script type='text/javascript'>
       jQuery( document ).ready( function($) {

            $('.enable_variation').addClass('show_if_vp_extended').show();

      });
   </script>
<?php 
} 
add_action( 'admin_footer', 'producttype_custom_js' );  

复选框已显示，我可以使用它。问题是，当我选择添加另一个属性(例如性别)时，页面加载了一会儿，然后两个属性都缺少“用于变体”复选框。

当我检查 CSS 中的元素时，我可以看到我的类“show_if_vp_extended”已添加到第一个元素上的“.enable_variation”类中，并且样式显示显示= block (这里一切都很好)。但是，当我向产品添加第二个属性时，它不会获取我的类，并且第一个元素将 CSS 更改为“display: none”，但仍然具有我的 vp 扩展类。

我在这里错过了什么或做错了什么？

JavaScript 函数作用于 1 个属性时的图片:

选择再添加1个属性时的图片:

Answer 1

新添加的属性不在 DOM 中，因此您的代码不会影响它。我相信每次添加属性时您都需要运行代码。

像这样的东西可能会起作用:

$( 'body' ).on( 'woocommerce_added_attribute', function( event ){
    $('.woocommerce_attribute_data .enable_variation').addClass('show_if_vp_extended').show();
});

或者大量借用订阅，这可能会更完整:

$('body').on('woocommerce_added_attribute', function(){
    if ($('select#product-type').val()=='vp_extended') {

        $( 'input#_downloadable' ).prop( 'checked', false );
        $( 'input#_virtual' ).removeAttr( 'checked' );

        $('.show_if_variable').show();
        $('.hide_if_variable').hide();
        $('.show_if_vp_extended').show();
        $('.hide_if_vp_extended').hide();
        $( 'input#_manage_stock' ).change();

    }
});