2017-05-20 119 views
0

我做了一個滑塊函數,現在我試圖從隱藏的輸入字段中獲取該滑塊的值,以便我可以使用php。有人有這樣的想法嗎?從函數獲取值並將其放入輸入字段

這滑塊的JavaScript

$(document).ready(function() { 
     //console.log("ready!"); 

     $(function() { 
      var circularSlider = $('#slider').CircularSlider({ 
       min: 0, 
       max: 359, 
       value: 0, 
       radius: 200, 
       labelSuffix: "°", 
       slide: function (ui, value) { 
        var colors = ['green', 'red', 'blue', 'yellow', 'pink', 'black']; 
        var color = colors[parseInt(value/60)]; 
        ui.find('.jcs').css({'border-color' : color, 'border-width': '50px' }); 
        ui.find('.jcs-indicator').css({'background' : color}); 
        ui.find('.jcs-value ').css({'background' : color, 'top': '15%', 'left': '17%' }); 
        /*ui.next().css({ 
         'background': 'linear-gradient(' + value + 
         'deg, white, cornsilk, white)' 
        });*/ 

       } 
      }); 
      //window.location.href= "mood.php?uid=" .color; 
     }); 

    }); 

這裏是滑蓋的HTML和輸入字段

<div id="slider"></div> 

<button class="moodReady">Ready</button> 
<form class="input" action="" method="post"> 
    <input type="hidden" class="data"/> 
</form> 
+0

形容你用'使用PHP的意思與it' –

+0

你需要在輸入字段 –

回答

1

$(document).ready(function() { 
 
     //console.log("ready!"); 
 

 
     $(function() { 
 
      var circularSlider = $('#slider').CircularSlider({ 
 
       min: 0, 
 
       max: 359, 
 
       value: 0, 
 
       radius: 200, 
 
       labelSuffix: "°", 
 
       slide: function (ui, value) { 
 
        var colors = ['green', 'red', 'blue', 'yellow', 'pink', 'black']; 
 
        var color = colors[parseInt(value/60)]; 
 
        ui.find('.jcs').css({'border-color' : color, 'border-width': '50px' }); 
 
        ui.find('.jcs-indicator').css({'background' : color}); 
 
        ui.find('.jcs-value ').css({'background' : color, 'top': '15%', 'left': '17%' }); 
 
        document.getElementById('hiddenValue').value = value; 
 

 
        /*ui.next().css({ 
 
         'background': 'linear-gradient(' + value + 
 
         'deg, white, cornsilk, white)' 
 
        });*/ 
 

 
       } 
 
      }); 
 
      //window.location.href= "mood.php?uid=" .color; 
 
     }); 
 

 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="http://toolitup.com/assets/js/circular-slider.min.js"></script> 
 

 
    <link rel="stylesheet" href="http://toolitup.com/assets/css/circular-slider.min.css" /> 
 
    
 
<div id="slider"></div> 
 

 
<button class="moodReady">Ready</button> 
 
<form class="input" action="" method="post"> 
 
    <input id="hiddenValue" type="hidden" class="data"/> 
 
</form>

+0

這似乎工作。謝謝。 –

0

假設你要設置的顏色VAR作爲輸入值,並假設它的唯一因素與類data

你可以簡單地這樣設置它(縮短你的代碼)

slide: function (ui, value) { 
     //... 
     var color = colors[parseInt(value/60)]; 
     $('.data').val(color); 
     //... 
    } 
+0

這其實是很方便也得益於設定值。 –

相關問題