文章/答案/技术大牛

发布

社区首页 >问答首页 >从Array获得正确的索引值

问从Array获得正确的索引值
EN

Stack Overflow用户

提问于 2018-05-28 11:12:42

回答 3查看 225关注 0票数 3

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

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

因此，基本上它从Array中选择值。如果你顺时针方向移动圆圈，它会从数组的背面选择值，如果逆时针方向移动，它将开始从下一个可用的位置获取值。如果在首页加载中呈现了11个项，那么它将开始从12个no索引中获取值。

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

假设您单击第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 endPoint = numberOfElement.length;

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

generateHtml();

$('#dynamic-html').on('click', '.shapes', function() {
  var deg = 90;
  var activeDeg = $('.active').data('deg');
  var needToremoveElement = activeDeg;
  var selectedElement = $(this).data('deg');
  var degrees = deg - selectedElement;
  var diff = Math.abs((activeDeg - selectedElement) / 18);
  $('.shapes').removeClass('active');
  $(this).addClass('active');
  var movementCloseWise = degrees > ($('.circle').data('deg') || 0);
  $('.circle').removeData('deg');
  $('.circle').css({
    'transform': 'rotate(' + degrees + 'deg)'
  }).attr('data-deg', degrees);
  if (movementCloseWise) {
    var itemLength = $('.shapes').length;
    $('.shapes:gt(' + ((itemLength - 1) - diff) + ')').remove()

    var newItems = generateItem(getItemsFromBack(diff), true);
    newItems = $(newItems).get().reverse();
    $('#dynamic-html').prepend(newItems)
    startPoint -= diff;
  } else {
    var newItems = generateItem(getItemFromStart(diff), false)
    $('#dynamic-html').append(newItems)
    $('.shapes:lt(' + (diff) + ')').remove()
    endPoint += diff;
  }

})



function getItemsFromBack(length) {
  var values = [];
  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();
}

function getItemFromStart(length) {
  var values = numberOfElement.slice(startPoint, startPoint + length);
  var valueCount = values.length;
  startPoint += valueCount;
  if (valueCount < length) {
    startPoint = 0;
    return values.concat(getItemFromStart(length - valueCount));
  } else if (startPoint >= numberOfElement.length) {
    startPoint = 0;
  }

  return values;
}

function generateItem(items, isClockWise) {
  var html = "",
    lastItemAngle;
  if (isClockWise) {
    lastItemAngle = $('#dynamic-html .shapes:first').data('deg');
  } else {
    lastItemAngle = $('#dynamic-html .shapes:last').data('deg');
  }

  items.forEach(function(item, index) {
    if (isClockWise) {
      var angles = lastItemAngle - (18 * (index + 1))
    } else {
      var angles = lastItemAngle + (18 * (index + 1))
    }
    html += '<div class="shapes" data-deg="' + (angles) + '" style="--deg:' + angles + 'deg;"> <span class="set-pos">' + (item) + '</span> <span>   ' + angles + ' deg </span></div>';
  });

  return html;
}

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-06-04 03:37:35

我认为您的问题是只是您的endPoint初始化值。在您的代码中，您将它初始化为var endPoint = numberOfElement.length;，这是错误的(我认为)，它应该由0初始化；我修改了它，它起了作用：

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 endPoint = 0; /* here is the change */
    	function generateHtml(){
    		var html ='';
    		initialRender.forEach(function(item,index){
    			var angle = 18 * (index);
    			var className = angle === 90? 'active':'';
    			html+='<div class="shapes '+className+'" data-deg="'+angle+'" style="--deg:'+angle+'deg;"> <span class="set-pos">'+(item)+'</span> <span>	'+angle+' deg </span></div>';
    		})
    		document.querySelector('#dynamic-html').innerHTML= html;
    	}

		generateHtml();
		
    	$('#dynamic-html').on('click','.shapes',function(){
    		var deg = 90;
    		var activeDeg = $('.active').data('deg');
    		var needToremoveElement = activeDeg;
    		var selectedElement = $(this).data('deg');
    		var degrees = deg - selectedElement;
    		var diff = Math.abs((activeDeg - selectedElement) / 18);
    		$('.shapes').removeClass('active');
    		$(this).addClass('active');
    		var movementCloseWise = degrees > ($('.circle').data('deg') || 0);
    		$('.circle').removeData('deg');
    		$('.circle').css({'transform' : 'rotate('+ degrees +'deg)'}).attr('data-deg',degrees);
    		if(movementCloseWise){
    			var itemLength = $('.shapes').length;
    			$('.shapes:gt('+((itemLength-1)-diff)+')').remove()

    			var newItems = generateItem(getItemsFromBack(diff), true);
    			newItems =  $(newItems).get().reverse();
    			$('#dynamic-html').prepend(newItems)
    			startPoint -= diff;
    		}else{
    			var newItems = generateItem(getItemFromStart(diff), false)
    			$('#dynamic-html').append(newItems)
    			$('.shapes:lt('+(diff)+')').remove()
    			endPoint += diff;
    		}
    			
    	})


    	
		function getItemsFromBack(length) {
		   var values = [];
		  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();
		}

    	function getItemFromStart(length) {
		    var values = numberOfElement.slice(startPoint, startPoint + length);
		    var valueCount = values.length;
    		startPoint += valueCount;
		    if (valueCount < length) {
		        startPoint = 0;
		        return values.concat( getItemFromStart(length - valueCount) );
		    } else if (startPoint >= numberOfElement.length) {
		        startPoint = 0;
		    }

		    	return values;
			}

		function generateItem (items, isClockWise){
			var html = "", lastItemAngle;	
			if(isClockWise){
				lastItemAngle = $('#dynamic-html .shapes:first').data('deg');	
			}
			else{
			    lastItemAngle = $('#dynamic-html .shapes:last').data('deg');		
			}
			
			items.forEach(function(item,index){
				if(isClockWise){
					var angles = lastItemAngle - (18 * (index +1))
				}
				else{
					var angles = lastItemAngle + (18 * (index +1))	
				}
    			html+='<div class="shapes" data-deg="'+(angles)+'" style="--deg:'+angles+'deg;"> <span class="set-pos">'+(item)+'</span> <span>	'+angles+' deg </span></div>';
    		});

    		return html;
		}

.main{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	height: 500px;
    }
    .pos{
		height:150px;
		width:150px;
		position: relative;
    }
	.circle{
		background: red;
		height:150px;
		width:150px;
		border-radius: 50%;
		transition: transform 0.3s ease-in-out;
	}
	.shapes{
		position: absolute;
		top:calc(50% - 75px);
		left:calc(50% - 10px);
		width: 20px;
	    height: 150px;
	    transform: rotate(var(--deg)) translate(0, 160px); 
	    background: green;
	    text-align: center;
	}

	.fake-overlay{
    position: absolute;
    width: 203%;
    height: 320%;
    background: #fff;
    top: -160px;
    right: -148%;
    display: none
    
	}
	.active{
		background: red
	}
	.set-pos{
		position: absolute;
		bottom: 0
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  		<div class="pos">
	  		<div class="circle">
	  			<div id="dynamic-html"></div>
	  		</div>
	  		<div class="fake-overlay"></div>
  		</div>
  	</div>

这是小提琴手

票数 1

Stack Overflow用户

发布于 2018-05-28 14:55:35

我已经通过下面的代码修复了这个问题。

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();
}

我正在检查endPoint是否大于总数组长度。然后使用endPoint- Array.length并使用diff获取元素

票数 1

Stack Overflow用户

发布于 2018-06-03 15:18:06

你的CSS是很棒的，但是你的JavaScript仍然有一个bug。试试这个：

单击7，然后单击2

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

给项目提供有意义的ids，这样我们就可以很容易地选择它们，比较它们并推断项目的角度。
不要使用硬编码数组(如果是因为jslint这样的代码质量工具，请考虑告诉它容忍for loops)

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

我没有过多地更改您的代码，所以您可以很容易地识别您的工作部件：

// 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;
}

更新后的JSFiddle链接如下

https://jsfiddle.net/dpvjtvjd/2/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50565083

复制

相似问题

问从Array获得正确的索引值
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从Array获得正确的索引值EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从Array获得正确的索引值
EN