Question

我想建立一个人们可以指出几个兴趣点的页面。

最多有50分，我想用几个滑块来传播它。因为它保存在数据库中，所以每个兴趣都会有一个默认值。

已经在网上找到了很多，并且在^ @ ^ ##下班后仍然无法正常工作。如果我给一个滑块一个（默认）值，其余的则不再有效。我尝试了很多东西，但现在我真的不知道了。

我做错了什么？或者这对我的代码不起作用？我还在学习:(

HTML

        <p>total available points  50 </p>
    <div id="sliders">
      <div>
        <div class="slider"></div>
        <input type="text" class="value" value="0" />
      </div>
      <div>
        <div class="slider"></div>
        <input type="text" class="value" value="0" />
      </div>
      <div>
        <div class="slider"></div>
        <input type="text" class="value" value="7" />
      </div>
      <div>
        <div class="slider"></div>
        <input type="text" class="value" value="0" />
      </div>
      <div>
        <div class="slider"></div>
        <input type="text" class="value" value="0" />
      </div>
      <div>
        <div class="slider"></div>
        <input type="text" class="value" value="0" />
      </div>
    </div>
<div class="slider"></div>

的javascript

          $(window).load(function(){

      var sliders = $("#sliders .slider");
      var availableTotal = 50;

      sliders.each(function() {

          $(this).empty().slider({

             value: 0,
              min: 0,
              max: 50,
              range: "max",
              step: 1,
              animate: 100,     
               create: function () {
                  $(this).slider( "option", "value", $(this).next().val() );
              },         
              slide: function(event, ui) {

                  // Get current total
                  var total = 0;   

                  sliders.not(this).each(function() {
                      total += $(this).slider("option", "value");
                  });    

                  var max = availableTotal - total;            

                  if (max - ui.value >= 0) {
                      // Need to do this because apparently jQ UI
                      // does not update value until this event completes
                      total += ui.value;
                     // console.log(max-ui.value);
                      $(this).siblings().val(ui.value);

                  } else {
                      return false;
                  }


                  //get total sum of all points
                  var sum = 0;
                  $(".value").each(function(){
                      sum += +$(this).val();
                  });
                  $(".total").text(sum);

              }
          });
      });
      });

JS fiddle

Answer 1

如果Id添加一个在开始时设置所有滑块的功能，它会起作用吗？输入框的值将由php设置。

jquery ui多个滑块，默认值和组合最大值

1 个答案: