Jquery - 从动态创建的输入框中获取值

Question

我在尝试创建一个“测验生成器”的过程中遇到了困难。

我有一个表单，你可以在其中填写测验的答案选项，但是你也可以动态地创建具有新ID的新字段。

因此，它会创建具有id txtAnswer1、txtAnswer2等的新输入。

以下是获取值的（不起作用的）代码：

    $("#AddNewQuiz").click(function () {
    var NewQuizAlts = $("#txtAnswer").val();
    var NewQuizQuestion = $("#NewQuizQuestion").val();
    var init = { 
        'questions': [ 
        {
       'question': NewQuizQuestion,
       'answersAlts': [NewQuizAlts,'Two','Three','Four'],
          'correctAnswer': 1
          } 
          ]
    }   

您可以看到，这里仅获取了静态的第一个值。但我想获取在“循环”或其他方式中创建的所有值。

有人有任何想法吗？

谢谢！

---

感谢回答！

但我无法让它正常运转！

我尝试过以下方法:

    $('input[id^="txtAnswer"]').each(function(input){
        var value = $('input[id^="txtAnswer"]').val();
        var id = $('input[id^="txtAnswer"]').attr('id');
        alert('id: ' + id + ' value:' + value);
        });

但是它只会给我警告（4次），指的是仅有最后一个创建的输入。可能出了什么问题？

关键是，这是我想要实现的内容：

1.) 使用上述代码获取所有已创建输入的列表。

2.) 将它们放在逗号分隔的列表中，其值如下：

    QuestionAlts = [''+Alt1+'',''+Alt2+'',''+Alt3+''];

3.) 同时，根据创建的输入数量生成更多备选项列表，并将它们显示出来。例如，如果我创建了5个备选项，列表应该是：

    QuestionAlts = [''+Alt1+'',''+Alt2+'',''+Alt3+'',''+Alt4+'',''+Alt5+''];

我明白如果要求你帮助翻译所有内容可能有点多，但是一个小部分总比没有好 :)

谢谢！

- Kim

Answer 1

编辑：

在这段代码中，你没有正确地使用上下文。http://api.jquery.com/jQuery.each/

$('input[id^="txtAnswer"]').each(function(input){
        var value = $('input[id^="txtAnswer"]').val();
        var id = $('input[id^="txtAnswer"]').attr('id');
        alert('id: ' + id + ' value:' + value);
});

在你的.each中，传递到函数中的是使用选择器提取的数组中的项。当你设置value = $('input...时，你又重新提取了同样的数组。

请使用.each，像这样：

$('your selector').each(function(index, item){
    var val = $(item).val();
    var id = $(item).attr('id');
    ...
});

除非您需要答案具有ID，否则为什么不使用data-*属性来表示它们作为答案？您可以像这样标记每个答案：

<input data-type="answer"/>

然后只需以这种方式提取所有答案：

$('input[data-type="answer"]')

如果动态id不重要的话，以这种方式进行操作可以消除需要确保每个动态id都是唯一的担忧。我为工作创建了一个数据过滤器，它在页面加载后动态地创建元素，我可以毫无问题地从DOM中提取数据。

- Yatrix

---

我尝试了相同的方法，但没有成功，它显示为空值。对此有什么想法吗？ - naveenkumar.s

Answer 2

你可以这样做：

$('input').each(function(input){
   var value = $(input).value();
   var id = $(input).attr('id');
   console.log('id: ' + id + ' value:' + value);
});

试试这个：

$('input[id^="txtAnswer"]').each(function(input){
    var value = $(this).val();
    var id = $(this).attr('id');
    alert('id: ' + id + ' value:' + value);
});

- ysrb

---

你也可以给备选答案添加一个类，并使用带有.class选择器的ysrb代码。 - s_qw23

Answer 3

如果您只想循环遍历输入，请尝试以下代码：

$('input').each(function() { alert(this.val()); });

这将循环遍历页面上的每个输入字段。

您可以通过定义[type=text]来进一步过滤它，甚至可以使用正则表达式来获取以特定ID开头的某些文本字段（例如，“匹配以“txtAnswer”开头后跟一个数字的任何文本字段”）。

试试这个：

$('input[id^="txtAnswer"]').each(function(input){
    var value = $(this).val();
    var id = $(this).attr('id');
    alert('id: ' + id + ' value:' + value);
});

- Buchannon