我想通过jQuery UI栏滑块的值将数据库中的蛋糕价格乘以。滑块用于选择客户将购买多少个蛋糕。我已经尝试使用json_encode从Php代码中收集价格的值作为数值数据,我似乎做错了,因为它一直在返回NaN。我将非常感谢您的回复。 Php代码在这里:
// Connect to the database
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
// Grab the profile data from the database
$res=mysqli_query($dbc, "SELECT * FROM tblcarousel");
while ($carouselRow = mysqli_fetch_array($res)){
echo' <div class="row"><div class="modal fade ' . $carouselRow['carousel_id'] . '" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">';
echo' <div class="modal-dialog">';
echo' <div class="modal-content">';
echo' <div class="modal-header">';
echo' <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
echo' <h2>' . ucwords($carouselRow['cake_title']) . ' unit price :₦' . ($carouselRow['cake_price']) . '</h2>';
echo' </div>';
echo' <div class="modal-body">';
echo' <div class="row">';
echo' <div class="span5">';
echo' <img src="admin/' . MM_UPLOADPATH .$carouselRow['cake_image'] . '" alt="' . $carouselRow['cake_title'] . '" />';
echo' </div>';
echo' <div class="span7">';
echo' <p>';
echo' <label for="amount">Maximum price:</label>';
echo' <input type="text" name="amount" class="amount" style="border:0; color:#f6931f; font-weight:bold;" />';
echo' </p>';
echo' <div class="slider-range-min"></div>';
echo' <div class="dont_display" style="display:none">';
$cakePrice = $carouselRow['cake_price'];
echo' </div>';
echo' <span class="orderValueOutput" style="background-color:yellow; display:block; height:2em">';
echo' </span>';
echo' <div class="demo-description" style="margin-top:3em; background-color:grey">Insert the info to supply contact here...';
echo' </div>';
echo' </div>';
echo' </div>';
echo' </div>';
echo' </div>';
echo' </div>';
echo' </div></div>';
来自jQuery UI的JavaScript在这里:
$(function(){
$( ".slider-range-min" ).slider({
range: "min",
value: 1,
min: 1,
max: 50,
slide: function( event, ui ){
$( ".amount" ).val( "=N=" + ui.value);
var cakePrice = <?php echo(json_encode($cakePrice)); ?>;
var cakePriceValue = Math.round(parseFloat(cakePrice);
var orderValueOutput = Math.round(parseFloat(ui.value) * cakePriceValue);
$(".orderValueOutput").text(orderValueOutput);
}
});
$( ".amount" ).val( "=N=" + $( ".slider-range-min" ).slider( "value" ) );
});