CODEWITHSUNDEEP
javascriptjquery
Toleo
Toleo

Reputation: 774

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>

In my Script here, I insert the index in the next span after input, So when you click x you get 0 and When you click y you get 1 and viceversa, The problem is When I click again on x which has index = 0,

What I expect is for the span of y to change to 0 instead of 1 since the key place changed after removing x index,

But that doesn't happen and the span stays 1 But if clicked it again, It changes to 0, How do I fix this problem?

EDIT: Added jQuery tag

Upvotes: 0

Views: 333

Answers (3)

Doug
Doug

Reputation: 1515

I created an outside function called 'updateDisplays' that will dynamically populate the spans as your array list changes...

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

Upvotes: 0

Leotrin Elmazi
Leotrin Elmazi

Reputation: 23

You should give an ID to span elements to relate the buttons value with span elements, than you should only delete the element from array and not break the function. Each time you click the button the content of span elements will be delete and created again, for each element that exist in array.

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>

Upvotes: 1

TheCrzyMan
TheCrzyMan

Reputation: 1030

Here's my go at updating everything using JQuery. Something to note is that the splice function actually takes more arguments than just the index. If you don't supply the length parameter, it will delete everything in the array after the index.

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>

Upvotes: 1

Related Questions