jquery - jQuery UI 和多个滑块

Question

如何从通过循环动态创建的多个滑块中获取值？

jQuery代码：

<script>
    $(function() {
            var col_text = {
                       0: "",
                       1: "Yes",
                       2: "Not sure",
                       3: "No"
                    };       
            var col_code = {
                       0: "",
                       1: "#00be00",
                       2: "#f1ee00",
                       3: "#d30000"
                    };   

        $( ".slider" ).slider({
            value:0,
            min: 0,
            max: 3,
            step: 1,
            slide: function( event, ui ) {
                $( "#answer" ).val( col_text[ui.value] );
                $( "#answer" ).css("background-color", col_code[ui.value] );
            }
        });
        $( "#answer" ).val(col_text[$(".slider").slider("value")]);
        $( "#answer" ).css("background-color",col_code[$(".slider").slider("value")]);
    });
    </script>

和循环内的PHP代码：

                    echo "<div class=\"listing-wrapper\">";
                    echo "<div style=\"margin-left: 664px\"><input type=\"text\" id=\"answer\" style=\"border: 0; font-weight: bold; width: 60px;\" /></div>";                   
                    echo "<div style=\"width: 600px; float: left;\">";
                    echo "<h3 style=\"background-color:".$answer['color']."; display: inline; \"><a href=\"".$question['url']."\" target=\"_blank\">".$question['title']."</a></h3>";
                    echo "<div style=\"\">".$question['question']."</div><br /><br />";
                    echo "</div>";
                    echo "<div class=\"slider\" style=\"width: 100px; float: left;\"></div>";
                    echo "<div style=\"clear: both;\"></div>";
                    echo "</div>";

当我移动循环生成的任何滑块时，它总是“更新”第一个问题实例。

感谢您的任何提示。