Jquery 基于数据属性值添加和构建类

用户将鼠标悬停在定价卡上，按价格从低到高排序。当用户将鼠标悬停在价格最低的计划上时，该计划所需的功能卡将突出显示。当用户将鼠标悬停在更昂贵的计划上时，基本功能卡和匹配的计划都会突出显示。每个平面和所有较小平面的功能都会突出显示

我使用1,2,3的数据属性作为悬停卡和功能分区。所以基本计划得到数据层=“1”，标准得到数据层=“2”，等等。我可以很容易地找到匹配的数据属性，但我不知道如何找到匹配和较小的数据属性

我曾经尝试过将我的功能卡添加到一个数组中，然后对这些功能卡进行forEach，并向其中添加一类

活动的
。这是我现在拥有的

$('.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');
});

$（'.posting price feature[数据层]）。过滤器（函数（）{
返回$（this）.data（'tier'）或
$('.posting-price-feature[data-tier]').filter(function () {
        return $(this).data('tier') <= tier;
    }).addClass('active');