javascript - Jquery UI slider 和百分比不起作用

Question

是的，我正在摆弄 Jquery UI slider ，到目前为止一切都很好。

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

我采用了几种不同的方法，但结果各不相同。

但由于某种原因我无法让这个工作。 slider 出现了，但它不可滑动，并且只是显示 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());什么也不返回。我已经更改了它，现在似乎可以正常工作了。

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

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