Question

我做了一个滑块功能，现在我试图从隐藏的输入字段中获取该滑块的值，以便我可以使用它。有人知道这样做吗？

这是滑块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>

Answer 1

＆＃13;

$( 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;
      });

  });

＆＃13;

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

＆＃13;

Answer 2

假设您要将color var设置为输入值并假设它是唯一具有类data的元素

你可以像这样设置它（缩短你的代码）

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

从函数中获取值并将其放在输入字段中

2 个答案: