How can I obtain values from multiple sliders created dynamically through the loop?
jQuery code:
- <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>
and PHP code inside the loop:
- 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>";
When I move any slider it always "update" first question instance.
Thanks for any tip.
-- Adam