Подтвердить, если 2 элемента имеют одинаковое значение атрибута

Question

В моей среде электронной коммерции мне нужна проверка jQuery между двумя атрибутами продукта. Упрощенно нужно проверить, есть ли в корзине товар, который присутствует на той же странице:

<! –– Cart ––>
<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 ––>
<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
    }
});

Как видите, идентификационный номер 6735 находится в большем количестве атрибутов. Так, возможно, другой путь также возможен?

Answer 1

1. Чтобы получить current_ProductId, вам просто нужно получить от $('article').data('id')
2. До l oop через все предметы из мини-корзины, вам просто нужно 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 ––>
<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 ––>
<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>

Answer 2

Если вам нужна только помощь в разъяснении вашего решения, это будет

$('.woocommerce-mini-cart .remove_from_cart_button').each( function() {
    if( $('article a.button').data('product_id') == $(this).data('product_id'){
        // do something here
    }
});

каждая итерация по совокупности jquery элементов.

This

jQuery('.woocommerce-mini-cart .remove_from_cart_button').attr('data-product_id')

является единственным значением, для этого потребуется первый элемент, который найдет и затем выполнит attr для него.

ОБНОВЛЕНИЕ

Чтобы обновить все товары на сайте, нажмите кнопку для всех товаров. которые находятся внутри карты

var product_id = "";
var article = ".post-"; // class of article

$('.woocommerce-mini-cart .remove_from_cart_button').each( function() {
     product_id = $(this).data('product_id')
     article = article + product_id; // we add strings here, example .post-6225
     $(article + " .product_wrapper a").attr('disabled', 'disabled');
});