獲得的價值和的jQuery

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

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

 

 
})

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

您可以通過使用.index()

Answer 2

$('input[name=item_qty]').each(function(i) { 
 
    $(this).change(function($mainElement) { 
 
     return function() { 
 
      $(this).val('My textfield changed'); 
 
      //put your chnage event code here 
 
     } 
 
    }($(this))); 
 
});

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

Answer 3

的change甚至使用輸入的索引t只有在文本輸入模糊後纔會觸發（用戶標籤或點擊，超出<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：
  • Array.from()。
  • Array.prototype.forEach()。
  • document.querySelectorAll()。
  • EventTarget.addEventListener()。
  • NonDocumentTypeChildNode.previousElementSibling。
  • While (...) statement。
• 的jQuery：
  • index()。
  • on()。