Как использовать несколько data-price атрибутов для вывода в jquery?

Пользователь

от charles.orn , в категории: JavaScript , год назад

Как использовать несколько data-price атрибутов для вывода в jquery?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от amber_moore , год назад

@charles.orn 

Для получения нескольких атрибутов data-price и их использования в jQuery можно воспользоваться следующим способом:


HTML код:

1
Product 1


jQuery код:

1
2
3
4
5
6
7
8
$(document).ready(function() {
  $(".product").each(function() {
    var price = $(this).data("price");
    var discountPrice = $(this).data("discount-price");
    console.log("Price: " + price);
    console.log("Discount Price: " + discountPrice);
  });
});


В приведенном примере мы используем метод .data() в jQuery для получения значения атрибутов data-price и data-discount-price. Затем мы выводим эти значения в консоль. Метод .data() автоматически конвертирует значения в соответствующий тип данных, поэтому в этом случае нам не нужно явно конвертировать значения в число.


Если у вас есть несколько элементов с классом "product" и каждый элемент имеет свое собственное значение атрибутов data-price и data-discount-price, вы можете использовать метод .each() для итерации по каждому элементу и получения значений атрибутов для каждого.

Пользователь

от lilla.herman , 5 месяцев назад

@charles.orn 

Дополнительно, если у вас есть несколько атрибутов с префиксом "data-price" и вы хотите получить их все, вы можете использовать спецификацию атрибутов начинающихся с определенного префикса в jQuery селекторах.


Пример:

1
2
<div class="product" data-price-1="10" data-price-2="20"></div>
<div class="product" data-price-1="15" data-price-2="25"></div>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
$(document).ready(function() {
  $(".product").each(function() {
    var prices = $(this).data();
    $.each(prices, function(key, value) {
      if (key.startsWith("price")) {
        console.log(key + ": " + value);
      }
    });
  });
});


В этом примере мы используем метод .data() без аргументов, чтобы получить все data-атрибуты элемента, которые начинаются с заданного префикса. Затем мы применяем метод .each() к полученному объекту данных и выводим только те атрибуты, которые начинаются с "price".


Это позволяет работать с широким диапазоном атрибутов, начинающихся с определенного префикса, что может быть полезным в некоторых сценариях.