3

こんにちは私は次のことに苦労しています

私は自分がやろうとしていることを示すために少しサンプルをノックアップしました。

http://jsfiddle.net/4F4f8/2/

私がしたいのは、赤い線が青い線を通過したときに、赤い線のデータ属性コメントを取得することです。

私は以下のように最も近いdivを検出するために最も近いjqueryを使用しようとしています。

var count = 1; 
setInterval(function(){

    leftPixels = count++;
    console.log(leftPixels);
    $('.scruber').css('left','-' + leftPixels * 10 + 'px');

    var markerData = $('.eventLine').closest('.marker').data('comment');

    $('.output').html(markerData);
    console.log(markerData);

},1000);

これで本当に助けていただければ幸いです

ありがとう

4

1 に答える 1

0

document.elementFromPoint（x、y）;を使用してこれを行うことができます。これが例です。

Chromeでテスト済み：

http://jsfiddle.net/4F4f8/18/

var getElementBelowMe = function($me) {
    var $below,
        elOffset = $me.offset(),      
        x        = elOffset.left + $me.width() / 2,
        y        = elOffset.top + $me.height() / 2;

    $me.css("visibility", "hidden");
    $below = document.elementFromPoint(x, y);
    $me.css("visibility", "");
    return $below;
}

var count = 1; 
setInterval(function(){

    leftPixels = count++;
    var scruber = $('.scruber');
    scruber.css('left','-' + leftPixels * 10 + 'px');

    var eventLine = $('.eventLine');

    var markerData = getElementBelowMe(eventLine);
    if(markerData && $(markerData).hasClass("marker")) {
        var txt = "Passing " + $(markerData).data("comment");
        console.log(txt);
        $(".output").append(txt + "<br />");
    }

},100);

ただし、覚えておく必要のあることがいくつかあります。

  • この例は、イベントラインの中心を見つけて、下にあるものを確認することで機能します。これは現在の設定では機能しますが、checkPointsが狭く、eventLineが広い場合は失敗する可能性があります。
  • elementFromPointのサポートはややバグがあるか、ブラウザごとに異なる（http://www.quirksmode.org/blog/archives/2010/06/more_ie9_goodne.html#link2）と言えます。
  • 例では可視性を使用しています。display：noneは、実際には他の要素の位置を変更して予期しない結果をもたらす可能性があるためです。
  • いくつかの構造でマーカーを調整し、コメントで提案された@Archerに最も近いものをチェックする方が良い解決策になる可能性があります
于 2012-10-10T14:22:55.830 に答える