4

我很难获得动态附加文本框的值。我正在使用该$.each函数根据其id在id.

<input type="text"  id="student_grde_G[1]" >
<input type="text"  id="student_grde_G[2]" >
<input type="text"  id="student_grde_G[3]" >

<input type="button" id="save_grade_button" class="button" value="Save Grades">

jQuery：

$('#save_grade_button').click(function (){
    $.each($('#student_grde_G[]'), function(i, item) {
        var grade =  $('#student_grde_G['+i+']').val();
        alert(grade);
    });
});

这行不通。谁能告诉我如何解决这个问题？

4

6 回答 6

2

一般来说，最好为它使用一个类，因为 id 是一个唯一标识符，你不应该在其中使用数组。如果您想在发布后在服务器端处理它们，您最好这样做：

<input type="text" class="studentGrade"  id="student_grde_G_1" name="studentGrade[]" >
<input type="text" class="studentGrade"  id="student_grde_G_2" name="studentGrade[]" >
<input type="text" class="studentGrade"  id="student_grde_G_3" name="studentGrade[]" >

<input type="button" id="save_grade_button" class="button" value="Save Grades">

并为您的脚本

$('#save_grade_button').click(function (){

         $('.studentGrade').each(function() {
           var grade =  $(this).val();
           alert(grade);
         });


     });

编辑：从 jQuery 1.7 开始，你应该用.on()绑定你的事件

$('#save_grade_button').on('click', function (){
   $('.studentGrade').each(function() {
      var grade =  $(this).val();
      alert(grade);
   });
};

或者如果保存按钮也将是动态的

$(document).on('click', '#save_grade_button', 'gradeSaveClick' function (){
   $('.studentGrade').each(function() {
      var grade =  $(this).val();
      alert(grade);
   });
};
于 2013-01-09T10:22:23.130 回答
2

您可以只使用 item 参数：

$('#save_grade_button').click(function (){
     $('input[type=text]').each(function(i, item) {
         var grade =  $(item).val();
         alert(grade);
     });
 });

或者结合@Adil的答案：

$('#save_grade_button').click(function (){
     $('[id^=student_grde_G]').each(function(i, item) {
         var grade =  $(item).val();
         alert(grade);
     });
 });
于 2013-01-09T10:18:53.107 回答
2

为所有文本框“student_grde”添加了一个新类

<input type="text"  class="student_grde" id="student_grde_G[1]" >
      <input type="text" class="student_grde" id="student_grde_G[2]" >
      <input type="text" class="student_grde" id="student_grde_G[3]" >


      <input type="button" id="save_grade_button" class="button" value="Save Grades">

和 jquery

$('#save_grade_button').click(function (){
    $.each($('.student_grde'), function(i, item) {
        var grade =  $('#student_grde_G['+i+']').val();
        alert(grade);
    });
});
于 2013-01-09T10:20:34.873 回答
2

您为 each 使用的选择与您的想法不符。[] 用于匹配元素的属性。

例如，'$("img[alt]")' 选择所有具有 alt 属性的 img 标签，$("img[alt=foo]")' 选择所有 alt 属性值为 foo 的 img 标签。

我建议使用一个类而不是将输入元素更改为

<input type="text" class="grades" id="student_grde_G[2]" >

然后将jQuery更改为

$('#save_grade_button').click(function (){
    $.each($('grades'), function() {
        var grade =  $(this).val();
        alert(grade);
    });
});

你的使用i忽略了最后一个元素。索引 (i) 从零开始，因此 i 的第一个值为 0（在您的示例中将不选择任何内容），最后一个是元素的计数减一，导致最后一个元素永远不会被选中。

但是，由于当前元素可以this在提供给每个元素的函数中访问，因此如果您对函数进行上述更改，则无需担心任何“off by one”错误

于 2013-01-09T10:21:41.317 回答
1

您没有带有 id 的元素student_grde_G[]使用通配符starts。

现场演示

$('#save_grade_button').click(function () {
  $.each($('[id^=student_grde_G]'), function (i, item) {
    var grade = $(this).val();
    alert(grade);
  });
});
于 2013-01-09T10:18:23.137 回答
0

如果您想为输入坚持使用前缀 id，您可以使用 jquery 通配符选择器。此外，您可以简单地使用传递给函数的项目，而不是使用 jquery 选择器来检索等级的值。如前所述，向输入添加一个类可能是一种更有效的方法。

$('#save_grade_button').click(function (){

   $.each($("input[id^='student_grde_G']"), function(i, item) { //uses wildcard selector

      var grade =  $(item).val();  //Use item instead of selector
          alert(grade);
      });
 });

示例：http: //jsbin.com/axenuj/1/edit

于 2013-01-09T10:22:09.877 回答