javascript - 将数组索引号添加到标签

Question

var arr = [];
$('.inp').click(function(){

function arrcall() {
            $.each(arr, function(key, value) {
                alert('Array Key is: ' + key + ' \n Array Key value is: ' + value);
            });
        }

  var id = $(this).attr('id');
  var value = $(this).val();
  
  if(value == 'empty') {
    this.value = id + 'ON';
    value = $(this).val();
    arr.push(value);
    arrcall();
    $('.txt').val(arr.join(','));
    return false;
  }
  if(value == id + 'ON') {
    arr.splice(arr.indexOf(value), 1)
    this.value = id + 'OFF';
    value = $(this).val();
    arr.push(value);
    arrcall();
    $('.txt').val(arr.join(','));
    return false;
  }
  if(value == id + 'OFF') {
    arr.splice(arr.indexOf(value), 1)
    this.value = 'empty';
    value = $(this).val();
    arrcall();
    $('.txt').val(arr.join(','));
    return false;
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input class='txt' type='input'>
  
  <label>X</label>
  <input class='inp' id='x' type='button' value='empty'>
  
  <label>Y</label>
  <input class='inp' id='y' type='button' value='empty'>
  
  <label>Z</label>
  <input class='inp' id='z' type='button' value='empty'>
</form>

我在这里尝试更改输入的值并将其添加到 .txt 输入中，现在我的问题是通过其数组键对标签进行编号

例如

如果我点击Z按钮，然后点击X按钮，然后点击Y按钮，并将它们设置为ON或OFF 我希望他们有他们的索引键号+ 1，这样标签就会更改为

X-2[xON] Y-3[yON] Z-1[zON]

如果我再次将其中一个空，数字将再次按索引正确排序。

所以如果我制作了Z按钮 OFF按钮将是

X-1[xON] Y-2[yON] Z[empty]

Answer 1

加载新数组后，您可以循环遍历所有输入并搜索其在数组中的位置，以修改标签。试试这个...

var arr = [];

function arrcall() {
    $.each(arr, function(key, value) {
        alert('Array Key is: ' + key + ' \n Array Key value is: ' + value);
    });
}

$('input.inp').click(function(e) {

    e.preventDefault();

    var id = $(this).attr('id');
    var value = this.value;
    var position = arr.indexOf(value);

    if (value == 'empty') {
        this.value = id+'ON';
        arr.push(this.value);
    }
    else if (value == id+'ON') {
        this.value = id+'OFF';
        arr[position] = this.value;
    }
    else if (value == id+'OFF') {
        this.value = 'empty';
        arr.splice(position,1);
    }

    arrcall();

    $('input.txt').val(arr.join(','));

    // Loop through all your inputs, search its value and modify label.        
    $('input.inp').each(function() {
        var pos = 0;
        if ((pos = arr.indexOf($(this).val())) >= 0)
            $(this).prev('label').text($(this).attr('id')+'-'+(pos+1));
        else
            $(this).prev('label').text($(this).attr('id'));
    });

})

希望对您有所帮助。