php - 从 WooCommerce 中的自定义字段调用值时如何使用 jQuery 删除类

Question

我正在为用户构建一个自定义字段，以允许在 WooCommerce 支持的站点中自定义销售徽章。该字段已创建，该值也在商店存档页面上回显，显示用户输入的销售徽章值。但是有一个问题。默认销售徽章也显示。我怎样才能删除它？

这就是我呼应值(value)的方式

add_action('woocommerce_before_shop_loop_item', 'ac_wc_show_custom_fields', 20); 

    function ac_wc_show_custom_fields(){
        global $post;
        if (get_post_meta( $post->ID, 'ac_custom_badge', true )!==''){
            echo '<div class="ac-loop-cus-badge">' .get_post_meta( $post->ID, 'ac_custom_badge', true ) . '</div>';

        }
    }

然后我尝试了这个并且它正在工作但是它正在将属性 display:none 添加到站点中的所有 .onsale 类

    function ac_wc_show_custom_fields(){
            global $post;
            if (get_post_meta( $post->ID, 'ac_custom_badge', true )!==''){
                echo '<div class="ac-loop-cus-badge">' .get_post_meta( $post->ID, 'ac_custom_badge', true ) . '</div>';
echo '<style>.onsale{display:none;}</style>';

            }
        }

我只想应用 css 或任何其他 jQuery 方法仅在检索到销售徽章的自定义字段时删除 .onsale span/class。希望我说得有道理。

谢谢

附录

我也试过用这个函数覆盖销售模板

add_action( 'woocommerce_before_shop_loop_item_title', 'custom_woocommerce_show_product_loop_sale_flash', 10 );

function custom_woocommerce_show_product_loop_sale_flash() {
     global $post;

     if (get_post_meta($post->ID, 'ac_custom_badge', true)) {
          wc_get_template( 'files/sale-flash.php' );

     }
}

但我最终得到了两个销售加价。请看图

Answer 1

要在 JavaScript(w/jQuery)中执行此操作，如果您在页面底部运行它，我想您会得到您想要的。

<script type="text/javascript">
    $(".ac-loop-cus-badge").removeClass("onsale");
</script>

可以在 removeClass 找到所有这些工作原理的文档。 .

如果您只需要将此应用于一个页面或容器 div，您可以将一个类添加到您的商店存档页面。这将阻止它删除其他页面或 div 的 onsale 类。

<div class="shop-archive-page"> 
    <!-- page contents do here-->
    <img class="ac-loop-cus-badge"></img>
    <!-- more page contents do here-->
</div>
<script type="text/javascript">
    $(".shop-archive-page .ac-loop-cus-badge").removeClass("onsale");
</script>

更新对于使用 :contains 的示例，其中产品 A 在其产品图片下方的 DOM 中，您可以使用以下内容。

$(".image-container span:contains('Product A')").parent().find(".ac-loop-cus-badge").removeClass("onsale");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-container">
  <i class="ac-loop-cus-badge onsale">IMAGE WOULD BE HERE</i>
  <br />
  <span class="product-description">This is Product A, it's on sale right now!</span>
</div>