Javascript 从数组中获取正确的索引值

我必须以圆形的形式显示数组值，它必须永远在循环中运行。逆时针旋转圆圈时，一切正常。但它有一个问题，当我们朝相反的方向移动圆圈时

我的方向盘上有一个活动元件。因此，当用户单击任何其他幻灯片然后激活时，它会计算单击的幻灯片和激活幻灯片之间的差异，然后相应地添加和删除控制盘中的项目

所以基本上它从数组中选取值。如果顺时针移动圆，它将从数组的背面拾取值；如果逆时针移动圆，它将从下一个可用位置拾取值。如果在第一个页面加载中呈现了11个项目，那么它将开始从12个无索引中获取值

当您从活动图元单击具有上述位置的项目，然后再次逆时针旋转该项目时，就会出现问题

假设您单击第8项，然后单击第7项。在这种情况下，应将第2项添加到车轮中

这是

var numberOfElement=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]；
var initialRender=numberOfElement.slice（0,11）；
var startPoint=initialRender.length；
var端点=numberOfElement.length；
函数generateHtml（）{
var html=''；
initialRender.forEach（函数（项，索引）{
var角=18*（指数）；
变量className=angle==90？'active'：''；
html+=''+（项目）+''+角度+'deg'；
})
document.querySelector（'#dynamic html'）.innerHTML=html；
}
generateHtml（）；
$（'#动态html'）。on（'click'，'.shapes'，function（）{
var-deg=90；
var activeDeg=$（'.active'）。数据（'deg'）；
var needToremoveElement=activeDeg；
var selectedElement=$（this.data（'deg'）；
变量度=度-选择的元素；
var diff=数学abs（（activeDeg-selectedElement）/18）；
$（'.shapes'）.removeClass（'active'）；
$（this.addClass（'active'）；
var movementCloseWise=degrees>（$（'.circle'）。数据（'deg'）| | 0）；
$（'.circle'）。删除数据（'deg'）；
$（'.circle'）.css({
“变换”：“旋转（“+度+”度）”
}).attr（'data-deg'，度）；
如果（移动近距离）{
var itemLength=$（'.shapes'）.length；
$（'.shapes:gt（'+（（itemLength-1）-diff）+'））.remove（）
var newItems=generateItem（getItemsFromBack（diff），true）；
newItems=$（newItems.get（）.reverse（）；
$（“#动态html”）.prepend（newItems）
起始点-=差异；
}否则{
var newItems=generateItem（getItemFromStart（diff），false）
$（'#动态html'）.append（newItems）
$（'.shapes:lt（'+（diff）+'））.remove（）
终点+=差异；
}
})
函数getItemsFromBack（长度）{
var值=[]；
端点=端点-长度；
如果（终点<0）{
endPoint=numberOfElement.length-Math.abs（端点）
var-otherVal=0；
如果（端点+长度>=numberOfElement.length）{
otherVal=（端点+长度）-numberOfElement.length；
值=numberOfElement.slice（端点，numberOfElement.length）
}
如果（其他值>0）{
values=values.concat（numberOfElement.slice（0，otherVal））
}
}否则{
值=numberOfElement.slice（端点、端点+长度）
}
var valuescont=values.length；
返回值；
}
函数getItemFromStart（长度）{
var值=numberOfElement.slice（起始点，起始点+长度）；
var valueCount=values.length；
startPoint+=值计数；
如果（valueCount<长度）{
起始点=0；
返回值.concat（getItemFromStart（length-valueCount））；
}else if（起始点>=numberOfElement.length）{
起始点=0；
}
返回值；
}
函数生成器项（项，逆时针）{
var html=“”，
最后一个角度；
如果（逆时针）{
lastItemAngle=$（'#dynamic html.shapes:first'）。数据（'deg'）；
}否则{
lastItemAngle=$（'#dynamic html.shapes:last'）。数据（'deg'）；
}
items.forEach（函数（项、索引）{
如果（逆时针）{
变量角度=lastItemAngle-（18*（索引+1））
}否则{
变量角度=lastItemAngle+（18*（索引+1））
}
html+=''+（项目）+''+角度+'deg'；
});
返回html；
}

我已通过以下代码修复了此问题

function getItemsFromBack(length) {
  var values = [];
  if (endPoint > numberOfElement.length) {
    var diff = endPoint - numberOfElement.length;
    values = numberOfElement.slice(diff - length, diff)
    endPoint = endPoint - length;
    return values.reverse();
  }
  endPoint = endPoint - length;
  if (endPoint < 0) {
    endPoint = numberOfElement.length - Math.abs(endPoint)
    var otherVal = 0;
    if (endPoint + length >= numberOfElement.length) {
      otherVal = (endPoint + length) - numberOfElement.length;
      values = numberOfElement.slice(endPoint, numberOfElement.length)
    }
    if (otherVal > 0) {
      values = values.concat(numberOfElement.slice(0, otherVal))
    }
  } else {
    values = numberOfElement.slice(endPoint, endPoint + length)
  }
  var valuesCount = values.length;
  return values.reverse();
}

函数getItemsFromBack（长度）{
var值=[]；
如果（端点>numberOfElement.length）{
var diff=端点-numberOfElement.length；
值=numberOfElement.slice（diff-长度，diff）
端点=端点-长度；
返回值；
}
端点=端点-长度；
如果（终点<0）{
endPoint=numberOfElement.length-Math.abs（端点）
var-otherVal=0；
如果（端点+长度>=numberOfElement.length）{
otherVal=（端点+长度）-numberOfElement.length；
值=numberOfElement.slice（端点，numberOfElement.length）
}
如果（其他值>0）{
values=values.concat（numberOfElement.slice（0，otherVal））
}
}否则{
值=numberOfElement.slice（端点、端点+长度）
}
var valuescont=values.length；
返回值；
}

---

我正在检查端点是否大于数组总长度。然后

endPoint-Array.length

并使用diff获取元素

您的CSS非常棒，但是您的JavaScript仍然有一个bug。试试这个：

单击7，然后单击2

为了解决这个问题，我建议简化一下您的逻辑：

• 为项目提供有意义的ID，以便我们可以轻松地选择它们，比较它们并推断项目角度
不要使用硬编码的数组（如果是因为像JSLIN这样的代码质量工具，那么请告诉它容忍循环< <代码> > <代码> < /LI>）

代码的复杂性来自于对1-30范围内的起点和终点的管理。以上第1点使这变得容易

我没有对您的代码进行太多更改，因此您可以轻松识别您的工作部件：<

function getItemsFromBack(length) {
  var values = [];
  if (endPoint > numberOfElement.length) {
    var diff = endPoint - numberOfElement.length;
    values = numberOfElement.slice(diff - length, diff)
    endPoint = endPoint - length;
    return values.reverse();
  }
  endPoint = endPoint - length;
  if (endPoint < 0) {
    endPoint = numberOfElement.length - Math.abs(endPoint)
    var otherVal = 0;
    if (endPoint + length >= numberOfElement.length) {
      otherVal = (endPoint + length) - numberOfElement.length;
      values = numberOfElement.slice(endPoint, numberOfElement.length)
    }
    if (otherVal > 0) {
      values = values.concat(numberOfElement.slice(0, otherVal))
    }
  } else {
    values = numberOfElement.slice(endPoint, endPoint + length)
  }
  var valuesCount = values.length;
  return values.reverse();
}

// Global variables
var numberOfItems = 30,
    numberOfRenderedItems = 11,
    firstItem = 0
;

function generateHtml(){
    var html ='';
    for (var item = 0; item < numberOfRenderedItems; item++) {
        var angle = 18 * item,
            className = angle === 90? 'active':'';
        html +=
            '<div class="shapes '+className+'" data-item="'+item+'" data-deg="'+angle+'" style="--deg:'+angle+'deg;">'+
            ' <span class="set-pos">'+(item+1)+'</span>'+
            ' <span>'+angle+' deg </span>'+
            '</div>';
    }
    document.querySelector('#dynamic-html').innerHTML= html;
}

generateHtml();

$('#dynamic-html').on('click','.shapes',function(){

    // Set clicked item active
    $('.shapes').removeClass('active');
    $(this).addClass('active');

    var selectedItem = Number($(this).data('item')),
        previousActiveItem = firstItem + Math.floor(numberOfRenderedItems/2),
        diff = selectedItem - previousActiveItem,
        selectedAngle = selectedItem * 18,
        degrees = 90 - selectedAngle,
        isClockWise = diff < 0;

    // Rotate all items
    $('.circle').removeData('deg');
    $('.circle').css({'transform' : 'rotate('+ degrees +'deg)'}).attr('data-deg',degrees);

    var items;
    if (isClockWise)
        items = getItemsFromBack(diff);
    else
        items = getItemsFromFront(diff);

    // Remove items
    items.toRemove.forEach( function (item) {
        $(".shapes[data-item="+item+"]").remove();        
    });

    // Add items
    var newItems = items.toAdd.reduce( function (html, item) {
        // Get item number between 1 and max
        var itemNumber = getNumberInRange(item),
            angle = 18 * item;
        return html +
            '<div class="shapes" data-item="'+item+'" data-deg="'+angle+'" style="--deg:'+angle+'deg;">'+
            ' <span class="set-pos">'+itemNumber+'</span>'+
            ' <span>'+angle+' deg </span>'+
            '</div>';
    }, '');
    if (isClockWise)
        $('#dynamic-html').append(newItems);
    else
        $('#dynamic-html').prepend(newItems)

})

function getItemsFromBack (diff) {
    var items = {
        toAdd: [],
        toRemove: []
    };

    firstItem += diff;
    for (var i = 0; i < Math.abs(diff); i++) {
        items.toAdd.push(firstItem + i);
        items.toRemove.push(firstItem + i + numberOfRenderedItems);
    }

    return items;
}

function getItemsFromFront (diff) {
    var items = {
        toAdd: [],
        toRemove: []
    };

    for (var i = 0; i < Math.abs(diff); i++) {
        items.toAdd.push(firstItem + i + numberOfRenderedItems);
        items.toRemove.push(firstItem + i);
    }
    firstItem += diff;

    return items;
}

function getNumberInRange (item) {
    do {
        item = (item + numberOfItems) % numberOfItems;
    }
    while (item < 0);
    return item + 1;
}