jquery - jQuery: クリックして幅を取得

Question

ユーザーがバーのどこかをクリックすると、インジケーターはその幅を取得できますか? (ビデオの進行状況バーに似ています)

$(function(){        
  $("#play").click(function() {
    $("#indicador").animate({"width": "150px"}, 8400);
  });
});

ここで試してみてください：http://jsfiddle.net/SwkaR/7/

Answer 1

イベント ハンドラーEventに最初のパラメーターとして渡されたオブジェクトから、ユーザーがクリックした座標を取得できます。要素に対する相対的な位置を取得するにclickは、ページに対する要素のオフセットを差し引くだけです。$.offset()

$("#bar").click(function(e) {
    var offset = $(this).offset();
    var relativeX = e.pageX - offset.left;
    var relativeY = e.pageY - offset.top;
    // Do something with these
});

たとえば、バーの任意の場所をクリックしてインジケーターを配置できるフォークされたフィドルを次に示します。

Answer 2

http://jsfiddle.net/SwkaR/13/とhttp://jsfiddle.net/SwkaR/18/に行きました

$(function(){

  $("#play").click(function() {
    $("#indicator").animate({"width": "150px"}, 8400);
  });
    $('#bar').click(function(e) {
        var parentOffset = $(this).parent().offset();
         var relX = e.pageX - parentOffset.left;
        $("#indicator").animate({"width": relX + "px"});
    });
    $('#indicator').click(function(e) {
        var parentOffset = $(this).parent().offset();
         var relX = e.pageX - parentOffset.left;
        $("#indicator").animate({"width": relX + "px"});
    });        
});

インジケーターの幅を、ユーザーがバーをクリックしたポイントに設定します

jQueryを使用して要素内のマウス位置を参照として取得し、バーのマウスクリック位置を取得し、インジケータをそれに設定します

Answer 3

インジケーターの幅を取得するには、次を使用します$("#indicator").width()

JQuery:

$(function(){

  $("#play").click(function() {
    $("#indicator").animate({"width": "150px"}, 8400);
  });

    $("#indicator").click(function() {
        alert($(this).width());
    });

});

ライブデモを参照