jquery - 在jQuery中选择具有相同类名的可调整大小栏的单个实例

Question

我有多个可调整大小的条，我需要从中提取初始大小，但不断发现元素未定义。到目前为止，这是我的代码。

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

...以及我在爱斯基摩人的帮助下开发的 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;
    }
});
});

目前，它的作用是使栏的所有实例更新它们的数字，即使它们没有被拖动。它也不会在页面加载时显示初始宽度。有什么建议么？

Answer 1

$('.marker p')您正在选择 class 的所有元素中的所有 'p' 元素.marker。如果您只想修改一个栏，您可以执行以下操作：

$('.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");
}