繁体   English   中英

更改数组索引后重新排列元素值

[英]Reorder Element value after Array Index change

 var array = []; $('input').click(function(){ var value = this.value; if (array.indexOf(value) > -1) { array.splice(array.indexOf(value)); $(this).next('span').html(''); return false; } array.push(value); $(this).next('span').html(array.indexOf(value)); }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input type='button' value="x"> <span></span> </div> <div> <input type='button' value="y"> <span></span> </div> 

在这里的脚本中,我在input之后的下一个span插入index ,因此,当您单击x您将得到0而当您单击y您将得到1 ,反之亦然,问题是当我再次单击具有index = 0 x

我期望的是yspan更改为0而不是1因为删除x索引后关键位置已更改,

但这不会发生,并且跨度保持为1但是如果再次单击它,它将变为0 ,如何解决此问题?

编辑:添加了jQuery标签

这是我使用JQuery更新所有内容的方法。 需要注意的是, splice函数实际上接受的参数不仅仅是索引 如果不提供length参数,它将删除索引后的数组中的所有内容。

 var array = []; $('input').click(function(){ var value = this.value var result = true; var i = array.indexOf(value); if (i > -1) { array.splice(i, 1); result = false; } else { array.push(value); } updateSpans(); return result; }) function updateSpans(){ $("input").each( function(){ var i = array.indexOf(this.value); var newHTML = i; if (i == -1){ newHTML = ""; } $(this).next('span').html(newHTML); }); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input type='button' value="x"> <span></span> </div> <div> <input type='button' value="y"> <span></span> </div> 

您应该为跨度元素提供一个ID,以将按钮值与跨度元素相关联,而不是应该只从数组中删除该元素而不破坏函数。 每次单击按钮时,将针对数组中存在的每个元素删除并再次创建span元素的内容。

 var array = []; $('input').click(function(){ var value = this.value; if (array.indexOf(value) > -1) { array.splice(array.indexOf(value),1); }else{ array.push(value); } $('span').html(''); $.each(array, function(i, item){ $('#'+item).html(array.indexOf(item)); }); }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='button' value="x"> <span id="x"></span> <input type='button' value="y"> <span id="y"></span> 

我创建了一个名为'updateDisplays'的外部函数,该函数将在您的数组列表更改时动态填充范围。

 // Make array[] global so that it can change across all the code var array = []; // bind all input elements (TODO: narrow input to specific type // and/or class name) to a click event $('input').click(function(){ // get the value of the input button var value = this.value; // test if the input's value already exists in the global // array[] var i = array.indexOf(value); // if the element does already exist in the array[]... if (i > -1) { // remove it array.splice(i, 1); }else{ // if it is not in the array, add it array.push(value); } // update the display output... updateDisplays(array); }) function updateDisplays(array){ // cycle through each button that exists on the page $('input[type="button"]').each( function(){ // find if the value of the button exists in the array[] var index = array.indexOf( $(this).attr('value') ); // ternary condition to set the value for 'output' // if the index is less than zero -- the value does not // exist in the array; so the string value is empty // if the index is greater than or equal to zero -- // the value does exist in the array, so the string value // is the text conversion of the index number var output = (index < 0 )? '' : index.toString(); // ^not totaly nessecary to convert a number to a string // in JavaScript/HTML -- it's just a nice coding convention // to follow. // update the neighboring span of the button with 'output' $(this).next('span').html( output ); }); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input type='button' value="w"> <span></span> </div> <div> <input type='button' value="x"> <span></span> </div> <div> <input type='button' value="y"> <span></span> </div> <div> <input type='button' value="z"> <span></span> </div> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM