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()

查询：

$(function(){

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

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

});

参考现场演示