Question

我正在尝试在网站上设置一个简单的图像评分系统，你点击一个缩略图，一个图像打开的模态框打开包含一个jquery滑块，移动它来评价图像并将值写回mysql。问题是我无法保存正确图像的值，它总是将得分值写回到表格中的最后一个条目。有人可以帮忙吗提前谢谢。

<div id="<?php echo $id; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<p><h3 id="myModalLabel"><?php echo $image_title ?></h3></p>
</div>
<div class="modal-body">
<img src="<?php echo $image_name ?>">
<h4>Photo description:</h4>
<p><?php echo $image_information ?></p>
<h4>Photographer: <?php echo $photographer_name ?></h4>

<h4 for="amount">Score:</h4>
<input type="text" id="amount" readonly style="color:#462a74;  width:16px; font-weight:bold;">
<div id="slider"></div>

</div>

<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>

<script>
$(document).ready(function() {      
$( "#amount" ).val(<?php echo $score; ?>);
$( "#slider" ).slider({
range: "max",
min: 1,
max: 100,
value: <?php echo $score; ?>,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});

$("#slider").mouseup(function(){
 var id = '<? echo $id ?>';
  var amount = (document.getElementById('amount').value);
 $.post( "update_score.php", { amount: amount, id:id } );
});
</script>


update_score.php

$id = $_POST['id'];
$score = $_POST['amount'];

$result = $sql->query("UPDATE images SET score = '$score' WHERE id = '$id'");

Answer 1

我现在工作得很好。我把代码改了一下。

    <p><input type="text" id="amount_<? echo $id ?>" class="amount" data slider="true" data-slider-theme="volume" data-slider-range="0,100" data-slider-step="1" value="<?php echo $score ?>"></p>

    <script>
    $("[data-slider]")
    .each(function () {
      var input = $(this);
      $("<span>")
        .addClass("output")
        .insertAfter($(this));
    })
    .bind("slider:ready slider:changed", function (event, data) {
      $(this)
        .nextAll(".output:first")
          .html(data.value.toFixed(3));
    });
    </script>

    <script>
    var id = '<?php echo $id; ?>';
    $(".amount").bind("slider:changed", function (event, data) {
    id = $(this).attr("id");
    $.post( "update_score.php", { amount: data.value, id:id } );
    });
    </script>

    <script>
    var id = '<?php echo $id; ?>';
    $(".comments").bind('keyup paste', function(e) {
        id = $(this).attr("id");
        $.post( "update_comments.php", { comments:e.target.value, id:id }     );
    });
    </script>

图像无效的简单评分滑块

1 个答案: