我想制作一个页面,人们可以在此页面上指出一些兴趣。

最多可以有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

最佳答案

如果我添加一个在开始时设置了所有幻灯片的功能,是否可以正常工作?输入框的值将由php设置。

关于javascript - jQuery的UI多个滑块与默认值和组合最大,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33545645/

10-12 00:37
查看更多