Jquery UI Slider＆amp;百分比不起作用

Question

是的，我正在搞乱Jquery UI滑块，现在已经很好了。

我试图让它显示更新到滑块右侧的百分比，并且所有滑块保持链接。

我已经采取了一些不同的方式，但结果各不相同。

但由于某种原因，我不能让这个工作。滑块显示为但是不可滑动，而不是仅显示NaN的数字。

我感觉它与我的选择器和/或我的元素嵌套有关。

非常感谢任何帮助。

var sliders = $("#mixers .percent-mix");
var availableTotal = 100;

sliders.each(function() {
  var init_value = parseInt($(this).text());

  $(this).siblings('.mix-value').text(init_value);

  $(this).empty().slider({
    value: init_value,
    min: 0,
    max: availableTotal,
    range: "max",
    step: 2,
    animate: 0,
    slide: function(event, ui) {
      debugger;
      // Update display to current value
      $(this).siblings('.mix-value').text(ui.value);

      // Get current total
      var total = 0;

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

      // Update each slider
      sliders.not(this).each(function() {
        debugger;
        var t = $(this),
          value = t.slider("option", "value");

        var new_value = value + (delta / 4);

        if (new_value < 0 || ui.value == 100)
          new_value = 0;
        if (new_value > 100)
          new_value = 100;

        t.siblings('.mix-value').text(new_value);
        t.slider('value', new_value);
      });
    }
  });
});

.align-table {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.t-align {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}
ul, li {
    list-style:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<ul id="mixers">
  <li>
    <div class="align-table">
      <div class="color-img t-align"></div>
      <div class="t-align">
        <div class="percent-mix"></div>
        <div class="mix-value"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="align-table">
      <div class="color-img t-align"></div>
      <div class="t-align">
        <div class="percent-mix"></div>
        <div class="mix-value"></div>
      </div>
    </div>
  </li>
</ul>

Answer 1

这是因为你没有初始值var init_value = parseInt($(this).text());什么都不返回。我已经改变了它，它现在似乎正在运作。

＆＃13;

＆＃13;

var sliders = $("#mixers .percent-mix");
var availableTotal = 100;

sliders.each(function() {
  var init_value = 5;

  $(this).siblings('.mix-value').text(init_value);

  $(this).empty().slider({
    value: init_value,
    min: 0,
    max: availableTotal,
    range: "max",
    step: 2,
    animate: 0,
    slide: function(event, ui) {
      debugger;
      // Update display to current value
      $(this).siblings('.mix-value').text(ui.value);

      // Get current total
      var total = 0;

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

      // Update each slider
      sliders.not(this).each(function() {
        debugger;
        var t = $(this),
          value = t.slider("option", "value");

        var new_value = value + (delta / 4);

        if (new_value < 0 || ui.value == 100)
          new_value = 0;
        if (new_value > 100)
          new_value = 100;

        t.siblings('.mix-value').text(new_value);
        t.slider('value', new_value);
      });
    }
  });
});

＆＃13;

.align-table {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.t-align {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}
ul, li {
    list-style:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<ul id="mixers">
  <li>
    <div class="align-table">
      <div class="color-img t-align"></div>
      <div class="t-align">
        <div class="percent-mix"></div>
        <div class="mix-value"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="align-table">
      <div class="color-img t-align"></div>
      <div class="t-align">
        <div class="percent-mix"></div>
        <div class="mix-value"></div>
      </div>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;