データ属性値に基づいてクラスを追加および構築する

Question

ユーザーは値段の安い順に値段を付けて価格カードにカーソルを合わせます。ユーザーが最低料金プランにカーソルを合わせると、そのプランの必須フィーチャーカードが強調表示されます。ユーザーがより高価なプランにカーソルを合わせると、基本フィーチャーカードと一致するプランが強調表示されます。それぞれのプランとそれよりも小さなプランのすべての機能がハイライト表示されます。

私はホバーカードとフィーチャーディビジョンに1,2,3のデータ属性を使用しています。だから基本的な計画はデータ層= "1"、標準は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 <