JavaScript php和html上的動態滑塊條
[英]Slider bar dynamic on javascript php and html
問題描述
我有這段代碼可以創建動態數量的滑塊，每個滑塊的動態答案數量，我無法理解我的代碼中的兩件事：
為什么只顯示一個滑塊？ （我的sql表上的第一個id滑塊編號）
為什么在金額框中僅顯示正確的ini值？ 當您移動滑塊時，會顯示
A rray（每次移動滑塊一個字符）？<script> var arrayslidersvalueanswers="<?= $tableslidersanswervalues ?>"; <?php foreach ($tableslidersqid as $qid) { ?> <?php foreach ($qid as $index) { ?> <?php echo $index;?> <?php foreach ($tableslidersanswersid as $qanswerid) { ?> <?php foreach ($qanswerid as $indexanswer) { ?> var answers="<?= $qanswerid ?>"; var qid= "<?= $index ?>"; jQuery(document).ready(function(){ /////////////////////SLIDER !!!!!!!!!!!!!!!!!!!!!!!!!!! var valor="<?= $tableslidersanswervalues[1][0] ?>"; // Ini slider $(document.getElementById("amount"+qid+"[]")).val(valor); $(document.getElementById("slider"+qid+"[]")).slider({ min: 1, max:arrayslidersvalueanswers.length, slide: function( event, ui) { var ans=answers[0][1] ; $(document.getElementById("amount"+qid+"[]")).val(answers[ui.value-1][0]); } //end slider ini method builder });//END OF FUNCTION }); });// end JavaScript document function <?php } ?> <?php } ?> <?php } ?> <?php } ?> </script> <html> <p> <label for="amount< ?= $row_Answer['QuestionIDFK'];?>">< ?php echo $row_questionset['QuestionValue']; ?>< /label> <input type="text" id="amount< ?= $row_Answer['QuestionIDFK'];?>[]" name="amount< ?= $row_Answer['QuestionIDFK'];?>[]" /> </p> <div id="slider< ?= $row_Answer['QuestionIDFK'];?>[]" name="slider< ?php echo $row_Answer['AnswerValue']; ?>[]" >< /div> </html>
1 個解決方案
解決方案1
0 2012-12-18 11:30:43
HTML中只有一個滑塊。
我認為您的foreach循環應遍歷HTML，以生成更多標記和滑塊。 然后，您可以在jquery中使用常規選擇器，以使所有滑塊正常工作。
$("div[id^='slider']").slider(...
將選擇ID以“ slider”開頭的所有div。
代碼的結構方式應為：
<script>
$(("div[id^='slider']").slider(//slider configuration here);
</script>
<html>
<?php foreach($allTableValues as $table): ?>
<label>...
<input>....
<slider id="slider_<?php echo $table->id ?>">...
<?php endforeach; ?>
</html>
具有HTML，Javascript和PHP的動態表？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.