假设我的总宽度为 585px。我想将空间分成相等的部分,并在位置内为每个部分分配一个索引值。如果我有 6 个部分,我可以做这样的事情:(按总宽度/部分数量分配)
//Set up elements with variables
this.sliderContent = config.sliderContent;
this.sectionsWrap = config.sectionsWrap;
//Selects <a>
this.sectionsLinks = this.sectionsWrap.children().children();
//Create drag handle
this.sectionsWrap.parent().append($(document.createElement("div")).addClass("handle-containment")
.append($(document.createElement("a")).addClass("handle ui-corner-all").text("DRAG")));
//Select handle
this.sliderHandle = $(".handle");
var left = ui.position.left,
position = [];
var position = ((left >= 0 && left <= 80) ? [0, 1] :
((left >= 81 && left <= 198) ? [117, 2] :
((left >= 199 && left <= 315) ? [234, 3] :
((left >= 316 && left <= 430) ? [351, 4] :
((left >= 431 && left <= 548) ? [468, 5] :
((left >= 549) ? [585, 6] : [] ) ) ) ) ) );
if (position.length) {
$(".handle").animate({
left : position[0]
}, 400);
Slider.contentTransitions(position);
}
但是如果我有 x 个部分怎么办?这些部分只是像
这样的元素<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
或者
<div><a></a></div>
<div><a></a></div>
<div><a></a></div>
<div><a></a></div>
如何划分 585px 的总数并根据 .handle
元素的当前左值对位置索引进行分类?我可以通过使用 ui.position.left 知道拖动 handle 在哪里,我想要的是能够为每个元素设置索引,并能够根据 handle 所在的位置对 handle 进行动画处理索引元素。由于每个元素都有索引,我稍后调用转换方法并传入要显示的当前索引 #。我上面显示的代码可以工作,但效率不高。我还需要考虑 handle 的宽度以适应截面宽度。 http://jsfiddle.net/yfqhV/1/
最佳答案
好吧,问题中的范围数字之间的差异略有不一致,这使得很难精确地算法化[我的杜撰的词 =)]:
- 81 到 199 = 118
- 199 到 316 = 117
- 316 到 431 = 115
- 431 到 518 = 118
如果你能对此进行调整,我有一个解决方案 - 它不是特别聪明的 JavaScript,因此很可能有更好的方法来做到这一点(SO JS 人们,请随意教育我!)但它有效。
首先我们需要一个函数来查找数组范围的索引,给定值落在该范围内(这取代了嵌套的 if-else 简写),然后我们有一个函数来设置位置数组,最后我们可以做范围搜索并返回相应的值数组。
这个解决方案应该动态处理不同数量的部分,只要这一行:
var len = $("#sectionContainer").children().length;
相应调整。唯一可能需要调整的其他值是:
var totalWidth = 585;
var xPos = 81;
尽管如果您有可以从中提取值的元素,则可以设置它们,从而使其更像是一个动态解决方案。
/**
* function to find the index of an array element where a given value falls
* between the range of values defined by array[index] and array[index+1]
*/
function findInRangeArray(arr, val){
for (var n = 0; n < arr.length-1; n++){
if ((val >= arr[n]) && (val < (arr[n+1]))) {
break;
}
}
return n;
}
/**
* function to set up arrays containing positional values
*/
function initPositionArrays() {
posArray = [];
leftPosArray = [];
var totalWidth = 585;
var xPos = 81;
var len = $("#sectionContainer").children().length;
var unit = totalWidth/(len - 1);
for (var i=1; i<=len; i++) {
pos = unit*(i-1);
posArray.push([Math.round(pos), i]);
xMin = (i >= 2 ? (i==2 ? xPos : leftPosArray[i-2] + posArray[1][0]) : 0);
leftPosArray.push(Math.round(xMin));
}
}
var left = ui.position.left;
initPositionArrays();
// find which index of "leftPosArray" range that "left" falls within
foundPos = findInRangeArray(leftPosArray, left);
var position = posArray[foundPos];
if (position.length) {
$(".handle").animate({
left : position[0]
}, 400);
Slider.contentTransitions(position);
}
我已经设置了 jsFiddle来说明。
享受吧!
编辑
我查看了 @JonnySooter 自己的答案,虽然它正确计算了位置,但它不会处理可变数量的部分。
为了使其能够处理任意数量的部分,handleContainment
div(即时创建)需要动态设置其宽度(通过内联样式)。
这是通过将部分的数量乘以每个部分的宽度(实际上与 slider 的宽度相同)来计算的。
这一切都是在创建句柄之后完成的,以便可以从“句柄”css 类中提取宽度,这意味着在 css 级别应用时,对句柄宽度的更改将级联到例程中。
查看此jsFiddle其中部分的数量可以更改并且 slider 行为正常。
关于javascript - 根据当前节分配索引#,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15229600/