是否有方法向产品元素中添加“活动”类？

Question

我试图在woocommerce产品标签云中通过他们的标签过滤产品。我的目标是能够选择多个标签和产品与这些标签显示。我使用的是PHP和jQuery。

目前，我正在使用PHP生成标记云，该标记云只显示与特定产品类别相关的标记，代码如下：

function custom_product_tag_cloud_func() {
 

    global $wp;
    $current_slug = add_query_arg( array(), $wp->request );
    if(strpos($current_slug, '/') !== false) {
      // explodable
      $newtest = explode('/', $current_slug);
      $current_slug = array_pop($newtest);
} 

    $args = array(
      'category' => array( $current_slug ),
      'limit' => -1
    );

$products = wc_get_products( $args );
$tags_objects = array();
foreach ($products as $product) {
$tags = get_the_terms( $product->get_id(), 'product_tag' );
if (is_array($tags) || is_object($tags)){
  foreach ($tags as $tag) {
    $slug = $tag->slug;
    $tag->id = $slug . " product_tag-" . $slug;
    array_push($tags_objects, $tag);
  }

}
}

$tags_objects = array_unique($tags_objects, SORT_REGULAR);
$tag_cloud = wp_generate_tag_cloud($tags_objects);
$content = '<div class="widget_product_tag_cloud"><div class="tagcloud">';
$content .= $tag_cloud;
$content .= '</div></div>';
return $content;

}

现在，这些产品中的每一个都有多个与它们相关的标记，因此，一旦单击标记云元素，我将使用jQuery循环每个产品并获取其类。此元素正在切换"active“类，以指示该元素已被选中。现在，我想向那些具有与标记云元素相同的标记的产品添加一个“活动”类。这是我的密码。

jQuery(document).ready(function($){
  $('.tag-cloud-link').on("click", function(event){
     event.preventDefault();
      $(this).toggleClass('active');
       $productList = $('.products li').each(function (index,value) 
      { 
         var classList = $(this).attr('class').split(/\s+/);
         $.each(classList, function(index, value){
         var result = classList[index].toString().substring(0, 12);
            //console.log(result);
         if(result.substring(value, 12) === 'product_tag-'){
            ourClass = value;
            //console.log(ourClass);

           if($(this).hasClass('ourClass')){
            $(this).addClass('active');
          
         };
         console.log(this);
         }
       });

      });
      });

   

  })

&&以下是几个以HTML形式呈现的产品

<li class="product type-product post-5628 status-publish first instock product_cat-playground-structures product_tag-ages-5-12 product_tag-play-and-park product_tag-playground-sets has-post-thumbnail shipping-taxable purchasable product-type-simple"></li>

<li class="product type-product post-5620 status-publish instock product_cat-playground-structures product_tag-ages-5-12 product_tag-play-and-park product_tag-playground-sets has-post-thumbnail shipping-taxable purchasable product-type-simple">
</li>

我被困在能够将“活动”类添加到相关标签的产品中。谁能给我指明正确的方向？我是否需要一个单独的函数返回一个值，然后将类添加到返回的值中？

Answer 1

在玩了更多的这些之后，我实现了预期的结果。在循环遍历每个“..tag cloud-link .active”元素之前，我必须向第一个对象切换和删除“.active”元素中的活动类，然后循环遍历它们的类，然后再遍历".products li“并设置" active”类。这是代码，如果它对其他人有帮助的话。

   jQuery(document).ready(function($){
   $('.tag-cloud-link').on("click", function(event){
      event.preventDefault();
       $(this).toggleClass('active',0).promise().done(function(){
           console.log('done toggle');
           $('.products li').removeClass('active');
          $('.tag-cloud-link.active').each(function(){
             var classList = $(this).attr('class').split(/\s+/);
             $.each(classList, function(index, value){
             var result = classList[index].toString().substring(0, 12);
             if(result.substring(value, 12) === 'product_tag-'){
                ourClass = value;
                $productList = $('.products li').each(function (index,value) {
                   if($(this).hasClass(ourClass)){
                      $(this).addClass('active');
                   }

                   if($(this).hasClass('active')){
                     $(this).show();
                   }
                   else{
                     $(this).hide();
                   }
                });
             }
             //console.log(this);
          });
       });
      });
    });
   })