トップ位置の値に応じてクラスを追加する

Question

イメージの上にツールチップを設定しました。ユーザーがこれらのツールチップの1つをクリックすると、コンテンツが開き、いくつかの情報が表示されます。

私はコンテンツを上下にスライドさせたいのですが、ツールチップがどこに配置されているか（絶対的なもの）です。だから、私は "トップ"値を取得しようとしているし、50より大きい場合は、クラスを追加し、残りの部分をCSSで整理してください。

問題は、常に最初の要素の「トップ」値を取得していることです。今、私は各機能を追加しようとしましたが、これはすべてのツールチップのトップポジションの平均値のように思えます。

$(".tooltip").each(function() { 
    var toppos = $(".tooltip").css("top"); 
    if (parseInt(toppos) >= 50) { 
    $(this).addClass('higher'); 
    } 
}); 

私はどちらか、各間違っを使用しています、またはそれぞれが、私はここに行くべきことではありません...

Answer 1

ターゲットの代わりに、すべてのツールチップの現在のツールチップ：

$(".tooltip").each(function() { 
    var toppos = $(this).css("top");// Use $(this) instead of $('.tooltip') 
    if (parseInt(toppos) >= 50) { 
    $(this).addClass('higher'); 
    } 
}); 

---

また、css（ 'top'）の代わりにoffset（）。topを試してみることもできます：

var toppos = $(this).offset().top;