兩次完成多個jQuery-UI滑塊的組合總數

Question

我有兩個相互依賴的滑塊。 2個滑塊的最大值爲100。如果第一個值是40％，第二個值將被設置爲60％。不過，我需要在同一頁面上出現兩組上述情況。我試過：Jsfiddle

第一組滑塊只能相互依賴，這應該在第二組中複製。但是，我面臨的一個問題是，第一組滑塊中的第一個滑塊和第二個滑塊正在影響第二組滑塊。

（HTML）：

First set 
<ul id="sliders"> 
    <li> 
     <div class="slider">70</div> 
     <span class="value">0</span>% 
    </li> 
    <li> 
     <div class="slider">30</div> 
     <span class="value" >0</span>% 
    </li> 
</ul> 

second set 
<ul id="sliders2"> 
    <li> 
     <div class="slider2">70</div> 
     <span class="value">0</span>% 
    </li> 
    <li> 
     <div class="slider2">30</div> 
     <span class="value" >0</span>% 
    </li> 
</ul> 

的Javascript：

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

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

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

    $(this).empty().slider({ 
     value: init_value, 
     min: 0, 
     max: availableTotal, 
     range: "max", 
     step: 2, 
     animate: 0, 
     slide: function(event, ui) { 

      // Update display to current value 
      $(this).siblings('.value').text(ui.value); 

      // Get current total 
      var total = 0; 

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

      // Need to do this because apparently jQ UI 
      // does not update value until this event completes 
      total += ui.value; 

      var delta = availableTotal - total; 

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

       var new_value = value + (delta/2) + 1; 

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

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

var sliders = $("#sliders2 .slider2"); 
var availableTotal = 100; 

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

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

    $(this).empty().slider({ 
     value: init_value, 
     min: 0, 
     max: availableTotal, 
     range: "max", 
     step: 2, 
     animate: 0, 
     slide: function(event, ui) { 

      // Update display to current value 
      $(this).siblings('.value').text(ui.value); 

      // Get current total 
      var total = 0; 

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

      // Need to do this because apparently jQ UI 
      // does not update value until this event completes 
      total += ui.value; 

      var delta = availableTotal - total; 

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

       var new_value = value + (delta/2) + 1; 

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

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

我的預感是var sliders = $("#sliders2 .slider2");不檢索第二滑塊組...

----- -Solved ---- 我已經編輯了我的代碼到Swires指出的內容。也已將代碼更新爲數學部分的正確公式。新小提琴：The correct version

Answer 1

我恨它，當發生這種情況對我來說，你可能只是需要就可以了另一套的眼睛。你已經設置兩套滑塊到變量：

var sliders 

改變了第二在這個小提琴sliders2：http://jsfiddle.net/e8fCy/1/和它的作品如你預期。

編輯在進一步的檢查中，您的數學可能也會關閉，稍後會進行檢查。