Question

好的，我知道这是一个时髦的标题，但我想不出更适合我的需求。此外，这是很多文字，但只需访问下面的链接就可以解释我所需要的90％。

背景：我正在为电子商务网站设计价格范围滑块。可在此处找到早期原型：http://mcdev3com00.web705.discountasp.net/collision-test.htm。

在阅读之前访问此页面可能会有所帮助。如果你向左滑动左手柄，它几乎完成了我的目标，看到这将使其他人更容易理解。

目标：我正在尝试设计滑块，以便位于手柄顶部的信息div将以对数方式相互排斥，它们越接近彼此。

目的是允许在句柄之间只有一点空间时显示价格信息而不包含包含该信息的div。

详情：换句话说，当左手柄向右滑动时，包含其顶部的美元值的div应该首先以小的增量滑向手柄下部的左侧，但是当整个左手柄来时更接近右手柄，增量变大，直到包含价格的div的右侧（手柄的上部）与手柄下部的右侧齐平。

RULES /约束：

左右手柄之间必须至少有几个像素的空间，它们不能重叠。
当手柄之间只有最小距离时，左手柄价格容器的右侧必须与左手柄下部的右侧齐平，右侧手柄的价格容器的左侧必须是齐平的右手柄下部的左侧。
当左手柄尽可能向左（x = 0％）时，上部div（价格容器）的左侧必须与手柄下部的左侧齐平。
当右手柄尽可能向右（x = 100％）时，上部div（价格容器）的右侧必须与手柄下部的右侧齐平。
移动一个手柄会移动它自己的价格容器和相反手柄的价格容器，只要这样做不违反规则1-4。

变量： 1.左手柄的位置 2.右手柄的位置 3.左手柄价格容器的宽度 4.右手柄价格容器的宽度 5.滑块控制的总宽度 6.左右手柄之间的距离

进展如此：左手柄（通过访问上面的链接可以看到）几乎正常运行。问题是，如果你将它几乎一直滑到右边，价格容器会根据if / then逻辑向左反弹到比它应该的更远，这让我感到困惑。

正确的手柄根本无法正常运作。

这里的任何帮助都将非常感激。我一直在努力与客户一起打破最后期限，而我正在撞墙。

非常感谢！

PS-应该正常工作的公式称为“avoidCollision”：

function avoidCollision(handle0, handle1) {

var lPrice = $("#test-left-handle-info"); //price container left
var rPrice = $("#test-right-handle-info"); //price container right
var lPriceWidth = lPrice.outerWidth(); //width of left price container
var rPriceWidth = rPrice.outerWidth(); //width of right price container
var lPriceOffsetLeft = (lPrice.offset().left); //document-level LEFT-EDGE position of left price container 
var lPriceOffsetRight = lPriceOffsetLeft + lPriceWidth;  //document-level RIGHT-EDGE position of left price container 
var rPriceOffsetLeft = rPrice.offset().left; //document-level LEFT-EDGE position of right price container 

var lContainer = $("#handle0"); //containing element for left-side price container and lower handle.
var rContainer = $("#handle1"); //containing element for right-side price container and lower handle.

var tW = $("#slider-range").width();   //total width of slider
var hw = $("#handle0").outerWidth(); //handle width
var hHw = ($("#handle0").outerWidth()) / 2; // half handle width

var cPosL = (lContainer.offset().left); //left edge of left handle
var cPosLre = cPosL + hw; //right edge of left handle
var cPosR = rContainer.offset().left; //left edge of right handle

//distance between handles as a percentage of total slider width:
var dis = ((cPosR - cPosLre) / tW);
//inverse of "dis" or remainder out of 100%:
var disInv = 1 - dis;

var mlt = -1; //multiplier to get the correct movement value (i.e. negative value to move left along the x-axis)
//if(cPosLRE < cPosLPrev){disInv = dis;} ?????
var lMove = ((lPriceWidth * disInv) * mlt) + hHw + 1; //css "left" value of lPrice
var rMove = rPriceWidth * disInv; //css "left" value of rPrice


//this is just helpful info for debugging:
$("#infoDivDiv").html("<br/><br/><strong>lInfoPosRE:</strong> " + lPriceOffsetRight + "<br/><strong>cPosLRE:</strong> " + cPosLre + "<br/><strong>lMove:</strong> " + lMove + "<br/><strong>lInfoWidth:</strong> " + lPriceWidth + "<br/><strong>Hw:</strong> " + hw + "<br/><strong>lInfoPos:</strong> " + lPriceOffsetLeft + "<br/><strong>cPosL:</strong> " + cPosL + "<br/><strong>cPosLPrev:</strong> " + cPosLPrev + "<br/><strong>cPosR:</strong> " + cPosR + "<br/><strong>rInfoPos:</strong> " + rPriceOffsetLeft + "<br/><strong>cPosRPrev:</strong> " + cPosRPrev);


//here is where the magic happens, also where I am lost.
if ((((lPriceOffsetRight >= cPosLre) && (lPriceOffsetLeft >= cPosL)) || (cPosLre < cPosLPrev)) && (cPosL > 10)) { 
    lPrice.css({ left: lMove });
}

if ((((rPriceOffsetLeft <= cPosR)) || (cPosR > cPosRPrev)) && (cPosR < (tW - 10))) {
    rPrice.css({ left: rMove });
}

cPosLPrev = cPosLre; //assign the current value to the "previous" container to be used in the next run so we know in which direction we are moving.
cPosRPrev = cPosR; //assign the current value to the "previous" container to be used in the next run so we know in which direction we are moving.

}

Answer 1

我宁愿不深入研究您的代码，但我可以看到您到达目的所需的步骤：

找到两个滑块之间的中间点
找出滑块在其原始位置和中间点之间的比例。
此比例表示标签的去向。值1表示一直到一方，值0表示一直到另一方。

我看不出你打算如何涉及对数......

这是一些伪代码：

var leftPos, rightPos; //Get these somehow
var leftHome = 0;
var rightHome = 1;
var midpoint = (leftPos + rightPos) / 2;

var leftProportion = (leftPos - leftHome) / (midpoint - leftHome);
var rightProportion = (rightPos - rightHome) / (midpoint - rightHome);

if leftProportion == 0
    put label flush with left edge
up unto leftProportion == 1
    put label flush with right edge

if rightProportion == 0
    put label flush with right edge
up unto rightProportion == 1
    put label flush with left edge

jQuery或Javascript对数排斥

PS-应该正常工作的公式称为“avoidCollision”：

}

1 个答案: