Jquery UI滑塊和百分比不工作

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());回報什麼。我已經改變了它，現在它似乎正在工作。

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>