Jquery在元素

Question

如何以百分比形式获取光标的位置？到目前为止我试过这个。

＆＃13;

＆＃13;

$(".outter").click(function(e) {
  var perc = e.offsetX / $(this).width() * 100;

  if (perc > 100)
    perc = 100;

  $(this).children(".progress").css("width", perc + "%");
});

$(".outter").dblclick(function(e) {
  $(this).children(".progress").css("width", "100%");
});

＆＃13;

.outter {
  display: inline-block;
  width: 33.33%;
  box-sizing: border-box;
  border: 2px solid black;
  padding: 10px;
  position: relative;
}
.outter > .content {
  position: relative;
  z-index: 2;
}
.outter > .progress {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #29B6AC;
  height: 100%;
  width: 50%;
  z-index: 1;
  transition: all .3s ease;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outter">
  <div class="content">
    Some content...
  </div>
  <div class="progress"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我的问题是，perc内的值不正确。在中间约50％似乎没问题。但是如果你点击大约10％的90％，你可以看到背景栏不会停在你的光标位置。我错了什么？

Answer 1

你在outter类上的填充css弄乱了offsetX模块，尝试将填充设置为0px，一切都按预期工作...阅读offsetX API/doc

Answer 2

.outter div的padding 10px，因为您使用的是jquery＆＃39; .width()，但不包括这20个像素。

你可以摆脱填充，也可以使用.outerWidth()来获得正确的大小。

Answer 3

计算应该是这样的：      $(".outter").click(function(e) { var parentOffset = $(this).parent().offset(); var relX = e.pageX - parentOffset.left; var perc = relX / $(this).width() * 100; ...