首页 / JAVASCRIPT / javascript-从数组中获取正确的索引值

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-从数组中获取正确的索引值，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7702字，纯文字阅读大概需要12分钟。

内容图文

我必须以圆形显示数组值,并且必须永远在循环中运行.逆时针旋转圆圈,一切正常.但是,当我们沿相反的方向移动圆环时,存在一个问题.

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

因此,基本上,它从Array中选择值.如果顺时针移动圆,则从数组的后面拾取值；如果逆时针移动圆,则从下一个可用的值开始拾取值.如果在首页加载中渲染了11个项目,则它将开始从12个无索引的值开始获取值.

当您从活动元素中单击具有以上位置的项目,然后再次将其逆时针旋转时,就会出现问题.

假设您点击了商品编号. 8然后单击项目编号7.在这种情况下,应将2号添加到车轮中.

这是fiddle.

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

解决方法:

我认为您的问题仅仅是您的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>

这是Jsfiddle

内容总结

以上是互联网集市为您收集整理的javascript-从数组中获取正确的索引值全部内容，希望文章能够帮你解决javascript-从数组中获取正确的索引值所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/668393.html

来源：【匿名】

【上一篇】javascript-Safari不会按时触发select元素上的click事件【下一篇】javascript 怎么调用php方法

更多 ►

【javascript-从数组中获取正确的索引值】教程文章相关的互联网学习教程文章

JavaScript-hash数组for in 函数【代码】

1什么是数组:内存中，连续存储多个数据的存储空间,再起一个名字为什么;2为什么：现实存储多个相关数据，都是集中存储，共同一个名字3 4 程序=数据结构+算法5好的数据结构可以极大的提高程序的执行效率6何时使用数组，今后只要连续存储多个相关的数据都要用数组7如何使用数组:8 9创建数组：3种 10一.创建空数组 11 1.创建空数组:var arr=[]; 12 2.用new: var arr=new Array(); 1314二.创建数组同时,初始化数组的数据: 15 1.数组直接...

网易前端微专业，JavaScript程序设计基础篇:数组【代码】

任何一种语言数组都是比较重要的，其作为一种基础对象应用很多，如Java你肯定少不了集合（List，Map)这些。因此本篇主要记录JS的数组使用和常用方法。要点如下：1，数组创建两种方式：var stu = new Array();var stu1 = [];这就和定义对象一样：var cat = new Object(); var cat1 = {};推荐用后者，比较简洁。如：var score = [1, 2, 3];数组里的东西可以是不同类型的，数组里面可以是基础类型也可以是对象或数组：var array = [16...

JavaScript数组定义

数组有四种定义的方式使用构造函数： var a = new Array(); var b = new Array(8); var c = new Array("first", "second", "third"); 或者数组直接量： var d = ["first", "second", "third"]; 属性 Array只有一个属性，就是length，length表示的是数组所占内存空间的数目，而不仅仅是数组中元素的个数，在刚才定义的数组中，b.length的值为8 <script> var a = new Array("first", "second", "third") a[48] = "12" document.writ...

JavaScript 数组遍历动态增长问题（V8源码解析）【代码】【图】

数组 arr 在遍历同时动态增长会发生什么呢let arr = [1,2] arr.forEach(item => arr.push(...arr)) console.log(arr) // 输出: [ 1, 2, 1, 2, 1, 2, 1, 2 ] 并未输出 [1,2] 或 [1,2,1,2...] 无限循环下去JavaScript引擎:V8源码git地址：https://github.com/v8/v8vscode打开源码文件夹V8-MASTER/src/builtins-collections-gen.cc数组的循环遍历由 Goto 与 BIND 搭配完成，Goto(adress) 指跳转的目标adress , BIND(adress) 指对应...

JavaScript数组的方法

push() :删除数组的第一个元素,返回删除的值。这里是0 pop() 　:删除数组的最后一个元素，返回删除的值shift() :删除数组的第一个元素,返回删除的值unshift() :把参数加载数组的前面，返回数组的长度splice() :插入/删除或替换数组元素sort() :对数组的元素进行排序reverse() :方法用于颠倒数组中元素的顺序(反序)原文：http://www.cnblogs.com/jyichen/p/5387406.html

JavaScript 数组操作【代码】

JavaScript中的关联数组【代码】

通常的数组在填充时会隐式或者显示指定数组下标，但JS中数组可以以名字的形式为元素赋值，这就形成了关联数组，如：var arr=new Array(); arr["china"]="beijing,niaoling,hulan"; arr["usa"]="newyork,washington,atlanta"; arr["japan"]="tokyo";alert(arr["china"]); alert(arr["japan"]);alert(arr[0]); 注意上面的alert(arr[0]);这一句，它会返回undifined。这就意味着，关联数组中，不能再以传统的下标方式来访问数组元素而...

JavaScript数组的常用方法【代码】

// sort() 数组排序 [3, 6, 2, 4, 1, 5] ==》 [6,5,4,3,2,1] //a-b是升序 b-a是降序 numberArray.sort(function(a,b){return b-a; })//reverse() 颠倒数组的顺序//push() pop() unshift() shift() 后面增加数组后面删除数组前面增加数组前面删除数组//join() toString() 数组转化为字符串//splice() 会对数组进行增加和修改 splice(2,1,"abc") 把索引值为2的值换成abc splice(2,0,"abc") 在所有值为2的增加abc splice(2,2,"abc...

js中判断数组中是否包含某元素的方法（转载）【代码】

转载来源：https://www.cnblogs.com/yunshangwuyou/p/10539090.html方法一：array.indexOf(item,start)：元素在数组中的位置,如果没与搜索到则返回 -1。参数描述item必须。查找的元素。start可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。实际用法：if(arr.indexOf(某元素) > -1){//则包含该元素} var fruits = ["Banana", "Orange",...

javascript学习笔记数组排序【代码】

数组排序1、冒泡排序最常用也是最容易理解的排序方式（一个嵌套的循环比较每一次的大小根据设定的条件来交换位置）。 1function bubblesort(ary) {2for (var i = 0; i < ary.length - 1; i++) {3for (var j = 0; j < ary.length - i - 1; j++) {4if (ary[j] > ary[j + 1]) {5var temp = ary[j];6 ary[j] = ary[j + 1];7 ary[j + 1] = temp;8 }9 ...

javascript的数组方法【代码】

1.数组首尾添加／移除数组元素：arr.push(...items) —— 从尾端添加元素arr.pop() —— 从尾端提取元素arr.shift() —— 从首端提取元素arr.unshift(...items) —— 从首端添加元素arr.splice(start[, deleteCount, elem1, ..., elemN]) ——可以实现添加，删除，修改数组它从索引 start 开始修改 arr：删除 deleteCount 个元素并在当前位置插入 elem1, ..., elemN。最后返回已被删除元素的数组将 deleteCount 设置为 0，splice ...

JavaScript数组和字符串的方法【代码】

数组的所有方法join():数组转字符串(原数组不会发生改变)let arr = ['a','b','c'] let newArr = arr.join('')//参数可以是空格逗号连字符等 console.log(newArr)//abc console.log(arr)//['a','b','c']push():向数组的末尾添加一个或多个元素，并返回新的长度(原数组发生改变)let arr = [1,2,3] arr.push(4) console.log(arr)//[1,2,3,4]pop():删除数组的最后一个元素(原数组发生改变)let arr = ['a','b','c'] arr.pop() console...

Javascript中数组重排序方法详解

在数组中有两个可以用来直接排序的方法，分别是reverse（）和sort（）。下面通过本文给大家详细介绍，对js 数组重排序相关知识感兴趣的朋友一起看看吧。　　1.数组中已存在两个可直接用来重排序的方法：reverse（）和sort（）。　　　　reverse()和sort（）方法的返回值是经过排序后的数组。reverse（）方法会反转数组项的顺序：　　　　var values = [1,2,3,4,5];　　　　values.reverse();　　　　alert(values);//5,4,3,2,1　　...

JavaScript中清空数组的三种方式【图】

方式1、splice123var ary = [1,2,3,4];ary.splice(0,ary.length);console.log(ary); // 输出 []，空数组，即被清空了详细说明：http://www.w3school.com.cn/jsref/jsref_splice.asp方式2、length赋值为0这种方式很有意思，其它语言如Java，其数组的length是只读的，不能被赋值。如12int[] ary = {1,2,3,4};ary.length = 0;Java中会报错，编译通不过。而JS中则可以，且将数组清空了，123var ary = [1,2,3,4];ary.length = 0;consol...

javascript中数组常用的方法【代码】【图】

在JavaScript中，数组可以使用Array构造函数来创建，或使用[]快速创建，这也是首选的方法。数组是继承自Object的原型，并且他对typeof没有特殊的返回值，他只返回‘object‘。运行[] instanceof Array他会返回ture。虽然结果是这样，但也有复杂的类数组对象，如字符串或arguments对象，但arguments对象并非是Array的实例，但他却拥有length属性，而且他的值是可以被索引的，因此他可以像一个数组那样被遍历。这本文中，我将介绍数组...

首页 / JAVASCRIPT / javascript-从数组中获取正确的索引值

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【javascript-从数组中获取正确的索引值】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

数组 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程