Question

我慢慢想到这个。我有多个可调整大小的条形，它们有一个指针，显示其内部的百分比。现在，这会更新所有条形指针，但只会调整当前被拖动的大小。我想最初显示数字，然后如果你选择其中一个指针并将其拖动，那么唯一一个将更新其百分比的是那个。

这是我的HTML：

<div id="wrapper" class="clearfix">
    <div class="r_bar"><span class="resizable" style="width: 34%;"><div class="marker"><p></p></div></span></div>
<br />
    <div class="r_bar"><span class="resizable secondColor" style="width: 50%;" title="50"><div class="marker"><p></p></div></span></div>
</div>

到目前为止，这是我的jQuery：

$(function(){
var initialWidth = $(this).find('span').css('width').replace('%', '');
initialWidth = parseInt(initialWidth);
var dragging = false;

$('.resizable').mousedown(function(e){
    dragging = true;
    $(this).addClass('moving');
    var parentOffset = $(this).parent().offset();

    $this = $(e.currentTarget);
    e.preventDefault();

    $(document).mousemove(function(e){
        if (dragging == true){
            $this.css("width",e.pageX - parentOffset.left);
            var percentageChange = (e.pageX - parentOffset.left) / initialWidth * 100
            $('.moving p').html(percentageChange.toFixed(0));
        }       
    });
});

$(document).mouseup(function(e){
    if (dragging){
        dragging = false;
        $(this).removeClass("moving");
    }
});
});

我无法根据内联样式宽度显示要显示的条的初始宽度，并且无法隔离当前调整大小的条并相应地更新百分比。如果拖动任何条形码，则更新所有条形码。该栏不会在未被拖动的栏上移动......但该号码仍会更新。

遇到同样的问题。如果移动一个条形，则数字更新就好了。但是当你去另一个栏时，两组数字会同时以相同的数字更新。

Answer 1

一个问题与关闭有关。因为mousemove事件处理程序位于mousedown处理程序的闭包中，所以它可以访问局部变量。但是，您没有使用var语句将$ this声明为变量，因此它不可见。

更改此行

$this = $(e.currentTarget);

到

var $this = $(e.currentTarget);

此外，每次移动时添加新的mousemove事件都会导致问题（内存泄漏）。您可能希望像使用mouseup一样提取该功能。

$(function(){
  var initialWidth = $(this).find('span').css('width').replace('%', '');
  initialWidth = parseInt(initialWidth);
  var dragging = false;
  var $this;
  var parentOffset;

  $('.resizable').mousedown(function(e){
    dragging = true;
    $(this).addClass('moving');
    parentOffset = $(this).parent().offset();

    $this = $(e.currentTarget);
    e.preventDefault();

  });

  $(document).mousemove(function(e){
    if (dragging == true){
      $this.css("width",e.pageX - parentOffset.left);
      var percentageChange = (e.pageX - parentOffset.left) / initialWidth * 100
      $('.moving p').html(percentageChange.toFixed(0));
    }       
  });


  $(document).mouseup(function(e){
    if (dragging){
        dragging = false;
        $(this).removeClass("moving");
    }
  });
});

n.b。 - 我没有测试，所以可能还有其他问题。

Answer 2

放弃这个，因为我无法让它正常工作。

更新当前可调整大小栏的百分比

2 个答案: