jquery - 是否可以在具有相同 id 的元素上使用 ajax 代码并单独检查？

Question

在我看来，我已经生成<input type="text" class="solution" name="answer" />了 3 次，并附有图像。
用户必须猜测图像是什么。
如果用户在文本框中输入他/她的答案，然后单击某处或标签到另一个字段，则下面的代码将运行脚本并检查答案是否正确。
现在，下面的代码工作得很好，除了它只对第一个 textbox 执行此操作。

如何让代码在每个文本框上运行？

$('.solution').change(function(){               
                var form_data = {
                    name: $('.solution').val(),
                    ajax: '1'
                    };
                $.ajax({
                    url: "<?php echo site_url('homework/submit'); ?>",
                    type:'POST',
                    data: form_data,
                    success: function(msg){
                        $('#message').html(msg);
                        //outputs: correct
                        },
                    error: function(msg){
                        $('#message').html(msg);
                        //outputs: wrong
                        }

                    });

                return false;
            });

这是我生成字段的代码：

$label = 1;
                $url = base_url('public/images/oefeningen');
                $dump = '';
                foreach ($result as $row)
                    {
                        $label = $row->exercise_id;
                        $arr_instructions = explode(',', $row->exercise_instruction);
                        foreach ($arr_instructions as $instruction)
                        {

                            $dump .= '<li><img src="'. $url . '/' . $instruction .'.png"/><br /><input type="text" class="solution" name="answer" /></li>';                                                             
                        }

                        $dump .= '</li>';
                    }
                    $dump .= '</ul>';
                    echo $dump;

提前致谢 ：）

Answer 1

该id属性必须是唯一的。请改用class选择器。

<input type="text" class="solution" name="answer" />

$(".solution").on("change", function() {
    var name = $(this).val();
    ...
});