Добавление и построение классов на основе значений атрибутов данных

Question

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

Я использую атрибуты данных 1,2,3 для карты наведения и разделов функций. Таким образом, базовый план получает значение data-tier = "1", Standard получает dat-tier = "2" и т. Д. Я могу легко настроить соответствующие атрибуты данных, но я не могу понять, как настроить сопоставление и меньшие атрибуты данных.

Я экспериментировал с добавлением моих карточек-функций в массив, а затем для каждого через них и добавлением класса active. Вот что у меня есть сейчас.

$('.posting-card').hover(function() { 
    // Grab the pricing tier denoted by data attribute. 
    var tier = $(this).data('tier'); 

    // Add class, active, to the card, I'm hovering over, and remove class active from any other cards. 
    $(this).addClass('active').siblings().removeClass('active'); 

    // Find feature cards that have a matching data attribute and add a class, active, to that as well. 
    $('.posting-price-feature[data-tier=' + tier + ']').addClass('active'); 

    // Find all other feature cards that have a data attribute value of less than what I'm hovering over now, 
    // If it has a lesser price tier add class, active, to that feature card. 


}, function() { 
    $(this).removeClass('active'), 
    $('.posting-price-feature').removeClass('active'); 
}); 

Answer 1

$('.posting-price-feature[data-tier]').filter(function() { 
     return $(this).data('tier') <= tier; 
    }).addClass('active'); 

jQuery selector for attributes with values greater than or less than an amount using > or <