0

初期サイズを取得する必要があるサイズ変更可能なバーが複数ありますが、要素が未定義であることを取得し続けます。これまでの私のコードは次のとおりです。

 <div class="r_bar"><span class="resizable" style="width: 34%;"><div class="marker"><p></p></div></span></div>

...そして、私が Eskimo の助けを借りて取り組んできた jQuery です。

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

$('.resizable').mousedown(function(e){
    dragging = true;
    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
            $('.marker p').html(percentageChange.toFixed(0));
        }       
    });
});

$(document).mouseup(function(e){
    if (dragging){
        dragging = false;
    }
});
});

現在これが行っていることは、バーがドラッグされていない場合でも、バーのすべてのインスタンスの数値を更新することです。また、ページの読み込み時に initialWidth も表示されません。助言がありますか？

4

1 に答える 1

0

$('.marker p')class を提供するすべての要素ですべての「p」要素を選択しています.marker。バーを 1 つだけ変更する場合は、次のようにします。

$('.resizable').mousedown(function(e){
    dragging = true;
    $(this).addClass("moving");
    var parentOffset = $(this).parent().offset();
    ... ... ...
        $('.moving p').html(percentageChange.toFixed(0));
    }       
   });
});

$(document).mouseup(function(e){
if (dragging){
    dragging = false;
    $(this).removeClass("moving");
}
于 2013-05-30T16:34:11.520 に答える