时间戳

首页 > 解决方案 > 验证 2 个元素是否具有相同的属性值

javascript - 验证 2 个元素是否具有相同的属性值

问题描述

在我的电子商务环境中，我需要在 2 个产品属性之间进行 jQuery 验证。简化后，它需要检查购物车是否有产品出现在同一页面上：

<! –– Cart ––&gt;
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
    <li class="woocommerce-mini-cart-item mini_cart_item">
        <a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6735" data-cart_item_key="..." ></a>
    </li>
</ul>

<! –– Product ––&gt;
<article class="post-6735 product" data-id="6735">
    <div class="product_wrapper">
        <a href="?add-to-cart=6735" data-quantity="1" class="button add_to_cart_button" data-product_id="6735"</a>
    </div>
</article>

我希望能够检查购物车中的属性及其值是否与元素data-product_id中的完全相同。article a.button我的做法：

jQuery('.woocommerce-mini-cart .remove_from_cart_button').attr('data-product_id').each( function() {
    if( jQuery('article a.button')/*check if it is the same*/){
        // do something here
    }
});

如您所见，ID 号6735在更多属性中。那么也许另一种方式也是可能的？

标签： javascriptjquerywoocommerceattributes

解决方案

  1. 要得到current_ProductId，你只需要从$('article').data('id')
  2. 要遍历所有迷你购物车项目，您只需要mini_cart_item
  3. 如您所见，我们可以通过使用获取数据属性值data

var current_ProductId = $('article').data('id');

$('.mini_cart_item').each(function() {
   var productId_MiniCartItem = $(this).find('a').data('product_id');
   
   if(productId_MiniCartItem == current_ProductId){
        // do something here
        console.log("ProductId: " + productId_MiniCartItem + " has been ordered");
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<! –– Cart ––&gt;
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
    <li class="woocommerce-mini-cart-item mini_cart_item">
        <a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6735" data-cart_item_key="..." >6735</a>
    </li>
    <li class="woocommerce-mini-cart-item mini_cart_item">
        <a href="/example-product/" class="remove remove_from_cart_button" data-product_id="6736" data-cart_item_key="..." >6736</a>
    </li>
</ul>

<! –– Product ––&gt;
<article class="post-6735 product" data-id="6735">
    <div class="product_wrapper">
        <a href="?add-to-cart=6735" data-quantity="1" class="button add_to_cart_button" data-product_id="6735"</a>
    </div>
</article>

推荐阅读