根據當前部分分配索引號

Question

假設我的總寬度爲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知道拖拽柄的位置，我想要的是能夠爲每個元素設置索引，並且能夠根據索引元素內的句柄位置來設置動畫句柄。由於每個元素都被編入索引，所以我稍後調用一個轉換方法並傳入當前索引＃以顯示。我上面顯示的代碼有效，但效率不高。我還需要考慮手柄的寬度以適合切片寬度。 http://jsfiddle.net/yfqhV/1/

Answer 1

好的，有在問題的範圍內的數字之間的差，這使得它很難algorithmise [我虛構的字紅杏 =）輕微不一致]此恰好：

• 81〜199 = 118
• 199至316 = 117
• 316 431 = 115
• 431至518 = 118

如果你可以調整的是，我有一個解決方案 - 它不是特別聰明的JavaScript，因此很可能有更好的方法來做到這一點（SO JS的人，隨時教育我！），但它的作品。我們首先需要一個函數來查找數組範圍的索引，給定的值落入（這取代了嵌套的if-else shorthands），然後我們有一個函數來設置位置數組，最後我們可以做一個範圍搜索並返回相應的值數組。

該溶液應該動態地處理不同數量的部分，只要這一行：

var len = $("#sectionContainer").children().length; 

被相應地調整。可能需要調整唯一的其他值是：

​​

雖然你可以設置他們，如果你有內容可以借鑑的價值，使它更動態的解決方案。

/** 
* 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（即上即時創建）都需要有它的寬度設置動態（通過內聯樣式）。
這是通過將部分的數量乘以每個部分的寬度（實際上與滑塊的寬度相同）來計算的。
這是在創建句柄之後完成的，以便可以從「句柄」css類中提取寬度，這意味着在css級別應用時，句柄寬度的更改將級聯到例程中。

看到這個jsFiddle其中可以改變部分的數量和滑塊的行爲正常。

Answer 2

var numSections = // ...; 
var totalWidth = // ...; 
var sectionWidth = totalWidth/numSections; 
var index = Math.floor($(".handle").position().left/sectionWidth); 
var leftPosition = index * sectionWidth; 
var rightPosition = leftPosition + sectionWidth - 1; 

Answer 3

UPDATE：

我曾在試圖找到一個解決方案自己，這就是我想出了：

function(event, ui) { 
    var left = ui.position.left, //Get the current position of the handle 
     self = Slider, //Set to the Slider object cus func is a callback 
     position = 1; 
     sections_count = self.sectionsLinks.length, //Count the sections 
     section_position = Math.floor(self.sectionsWrap.width()/sections_count); //Set width of each section according to total width and section count 

    left = Math.round(left/section_position); //Set the index 
    position = (left * section_position); //Set the left ammount 

    if(position < section_position){ //If handle is dropped in the first section 
     position = 0.1; //Set the distance to animate 
     left = 0; //Set index to first section 
    } 

    if (position.length) { 
     $(this).animate({ 
      left : position //Animate according to distance 
     }, 200); 
     left = left += 1; //Add one to the index so that I can use the nth() child selector later. 
     self.contentTransitions(left); 
    } 
}