Question

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>

在我的脚本中，我在index之后的span中插入了input，因此，当您点击x时，您会获得0以及当您点击y您获得1，反之亦然，问题是当我再次点击x时索引= 0，

我期望span y 0更改为1而不是x，因为删除1索引后关键位置已更改，< / p>

但是这种情况不会发生且跨度保持0但是如果再次点击它，它会更改为msbuild.exe mysln.sln /maxcpucount:3，如何解决此问题？

编辑：添加了jQuery标签

Answer 1

这是我使用JQuery更新所有内容的方法。 Something to note is that the splice function actually takes more arguments than just the index。如果您没有提供length参数，它将删除索引后数组中的所有内容。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您应该为span元素指定一个ID，以便将按钮值与span元素相关联，而不应仅从数组中删除该元素而不破坏该函数。每次单击该按钮时，对于数组中存在的每个元素，将删除并再次创建span元素的内容。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我创建了一个名为'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>

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

3 个答案: