Question

我有类似的代码

<input type="text" name="item_qty[0]">
<input type="text" name="item_qty[1]">
<input type="text" name="item_qty[2]">
<input type="text" name="item_qty[3]">

我希望通过JQuery指定来自数组的哪些输入已被更改（0,1,2,3）并获取其值。

我尝试了下面的代码但是我无法完成它我需要获取数组键（$ i）和输入值。

<SCRIPT LANGUAGE="JavaScript">
$(document).ready(function() {     
      $('input[name=item_qty[$i]]').change(function(){


      });
  });
</SCRIPT>

Answer 1

＆＃13;

$('input').on('input',function(i,v){
console.log("index of input is " + $(this).index())
console.log("name of input is " + $(this).attr('name'))


})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="item_qty[0]">
<input type="text" name="item_qty[1]">
<input type="text" name="item_qty[2]">
<input type="text" name="item_qty[3]">

＆＃13;

您可以使用.index()

来使用输入的索引

Answer 2

change事件仅在文字输入模糊（用户标签或点击，<input>）后触发;如果这就是你想要发生的事情那么：

$('input[type="text"]').on('change', function(e) {
  // e: is a reference to the event.

  var index = $(this).index(),
      name = this.name;

  console.log("Name: " + name + ", index: " + index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="item_qty[0]" />
<input type="text" name="item_qty[1]" />
<input type="text" name="item_qty[2]" />
<input type="text" name="item_qty[3]" />

或者，在普通的JavaScript中，它仍然相对容易（虽然有点冗长）：

// a simple utility function to retrieve the element's index:
function getIndex(node) {

  // assigning the node to the 'current' variable:
  var current = node,

    // initialising a 'count' variable at 0:
    count = 0;

  // while there is a current node, and that current node
  // has a previousElementSibling (a previous sibling that
  // is an HTMLElement):
  while (current && current.previousElementSibling) {

    // increment the count:
    count++

    // assign the previous HTMLElement sibling to
    // the current variable and repeat:
    current = current.previousElementSibling;
  }

  // return the final value of the count:
  return count;
}


// a simple named function to retrieve the relevant details:
function getDetails() {

  // caching the 'this' into the 'node' variable:
  var node = this;

  // logging the details (you could also return here):
  console.log({

    // the name of the element node:
    'name': node.name,

    // the index of the element node:
    'index': getIndex(node),

    // and the value of the element node
    // (to show how to access existing
    // other properties of the node,
    // although that wasn't specified in
    // the question):
    'value': node.value
  });
}


// creating an Array from the Array-like HTMLCollection returned
// by document.querySelectorAll(), and iterating over that Array
// using Array.prototype.forEach():
Array.from(document.querySelectorAll('input[type="text"]')).forEach(function(input) {
  // 'input', the first argument, is a reference to the
  // current Array-element of the Array over which
  // we're iterating.

  // here we assign the named function (note the lack of
  // parentheses) as the 'change' event handler:
  input.addEventListener('change', getDetails);
});

input {
  display: block;
  margin: 0 0 0.4em 0.4em;
}

<input type="text" name="item_qty[0]" />
<input type="text" name="item_qty[1]" />
<input type="text" name="item_qty[2]" />
<input type="text" name="item_qty[3]" />

参考

CSS：
- Attribute selectors ([attr], [attr=value]...)。
JavaScript的：
jQuery的：
- index()。
- on()。

通过jquery从输入数组中获取值和键

2 个答案: