関数から値を取得して入力フィールドに入れよう

Question

スライダ関数を作成しましたが、隠し入力フィールドのスライダから値を取得しようとしています。誰もそれをする考えがありますか？

ここ

$(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> 

Answer 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>

Answer 2

あなたが入力値としてのカラーVARを設定したいと仮定すると、その要素のみを想定しているjavascriptのこのスライダクラス付きdata

このように簡単に設定できます（コード短縮）

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