更新當前可調整大小的酒吧的百分比

我正在慢慢地弄清楚這一點。我有多個可調整大小的欄，其中有一個指針顯示其中的百分比。此時此更新所有小節指針，但只調整正在拖動的當前小節。我想要最初顯示數字，然後如果您選擇其中一個指針並將其拖動，唯一會更新其百分比的就是那一個。更新當前可調整大小的酒吧的百分比

這裏是我的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"); 
    } 
}); 
});

我不能讓酒吧的初始寬度基於內嵌式的寬度顯示並且無法隔離正在調整大小的當前欄並相應地更新百分比。如果有任何被拖動，所有小節數字更新。該欄不會在未被拖動的欄上移動...但該數字仍會更新。

有同樣的問題。如果移動一個欄，數字更新就好了。但是，當你去和拖動另一個酒吧兩組數字同時更新相同的數字。

來源

2013-05-31 Amidude

放棄這一個，因爲我不能讓它正常工作。

來源

2013-06-06 19:38:44 Amidude

一個問題與封閉有關。由於mousemove事件處理程序位於mousedown處理程序的關閉中，因此它可以訪問本地變量。然而，你沒有聲明$ this作爲var語句的變量，所以它不可見。

改變這一行

$this = $(e.currentTarget);

到

var $this = $(e.currentTarget);

此外，你將不得不與每次移動時添加新的鼠標移動事件的問題（內存泄漏）。您可能想要像使用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. - 我沒有測試，所以可能有其他問題。

來源

2013-05-31 23:05:14 Hogan

沒問題。謝謝......我喜歡你要去的地方。 – Amidude

我搞砸了一些，但它仍然在做同樣的事情。如果一個欄移動，數字更新就好了。但是，當你去和拖動另一個酒吧兩組數字同時更新相同的數字。（仍然是Fiddlin） – Amidude

更新當前可調整大小的酒吧的百分比

回答

相關問題