在达到最佳解决方案之前/之前的一些注意事项:
- 您已声明并初始化了
allBetween
变量,但未使用它。建议将其删除。
- 在您的
#buttonOne
事件侦听器中,您正在使用不一致的值:429和424:if($("#firstInput").val() > 429 )$("#firstInput").val(424);
- 您多次使用
#firstInput
(和#thirdInput
)选择器而没有缓存引用。
- 您正在为每个按钮复制函数。更好、更少出错的解决方案是创建一个方法来构建这些方法。
最终代码
优化已经在先前解释过了。我不会详细说明它们,因为那不是问题的主题。我已经在脚本注释中解释了所请求行为的函数逻辑(如下所示)。
$(document).ready(function() {
function createButtonClickEvent(sel_selector, input_selector, left_limit, right_limit) {
return function(){
var $sel = $(sel_selector),
$input = $(input_selector),
val = $input.val();
if (val > right_limit) input.val(val = right_limit);
else if (val < left_limit) input.val(val = left_limit);
$sel.css('left', val + "px");
var $allElems = $("#second").children(".single"),
$between = $allElems.inRangeX("#selFirst", "#selSecond");
$allElems.removeClass("ui-selected");
$between.addClass("ui-selected");
}
}
$("#buttonOne").click(createButtonClickEvent("#selFirst", "#firstInput", 0, 429));
$("#buttonTwo").click(createButtonClickEvent("#selSecond", "#thirdInput", 0, 429));
var valuesG = [],
$elements = $();
for (i = 0; i < 144; i++) {
valuesG[i] = Math.floor(Math.random() * (30 - 20 + 1) + 10);
$elements = $elements.add($("<div class='single'>")
.css('height', valuesG[i])
.css('margin-top', 30 - valuesG[i]));
}
$elements.appendTo($("#second"));
$("#second").children(".single").addClass("ui-selected");
(function($) {
$.fn.inRangeX = function(x1, x2) {
if (typeof x1 == "string" && +x1 != x1 || x1 instanceof Element) {
x1 = $(x1);
}
if (typeof x2 == "string" && +x1 != x1 || x1 instanceof Element) {
x2 = $(x2);
}
if (x1 instanceof $) {
x1 = x1.offset().left;
}
if (x2 instanceof $) {
x2 = x2.offset().left;
}
x1 = +x1;
x2 = +x2;
if (x1 > x2) {
var x = x1;
x1 = x2;
x2 = x;
}
return this.filter(function() {
var $this = $(this),
offset = $this.offset(),
rightSide = offset.left - 5;
return offset.left >= x1 + 5 && rightSide <= x2;
});
}
})(jQuery);
var startFirst = $(".selector#selFirst").position().left;
var startSecond = $(".selector#selSecond").position().left;
$('input#firstInput').val(startFirst);
$('input#thirdInput').val(startSecond);
var $selFirst = $("#selFirst"),
$selSecond = $("#selSecond"),
cachedWidth = $selFirst.outerWidth();
function drag_function(event, ui){
var $firstRightBorder = $selFirst.position().left + cachedWidth,
$secondLeft = $selSecond.position().left,
diff = $firstRightBorder - $secondLeft;
if (diff > 0) {
var currentLeft = parseFloat($(this).css("left"));
if (this.id == "selSecond") diff = -diff;
ui.position.left = currentLeft - diff;
ui.helper.css("left", currentLeft - diff);
}
var $allElems = $("#second").children(".single"),
$between = $allElems.inRangeX("#selFirst", "#selSecond");
$("#firstInput").val($("#selFirst").position().left);
$("#thirdInput").val($("#selSecond").position().left);
$allElems.removeClass("ui-selected");
$between.addClass("ui-selected");
var allBetween = $('.ui-selected');
}
$("#selFirst, #selSecond").draggable({
containment: 'parent',
axis: 'x',
drag: drag_function,
stop: drag_function
});
});