Javascript，相同的代码，不同的按钮错误

Question

发生了一些奇怪的事情，我有一个函数应该以相同的方式处理所有的按钮，但它没有。我找不到错误。 只有第三个按钮正常工作。输入范围div移动并将其置于另一侧，以便您可以切换它。

Fiddle

我想这是与左动画或CSS变量的一个问题。

$(document).ready(function(){ 
 
    $('#reak00').change(saveSettings); 
 
    $('#rebk00').change(saveSettings); 
 
    $('#reck00').change(saveSettings);  
 
    loadSettings(); 
 
    }); 
 
    function loadSettings() { 
 
    $('#reak00').val(localStorage.reak00); 
 
    $('#rebk00').val(localStorage.rebk00); 
 
    $('#reck00').val(localStorage.reck00);  
 
    } 
 
    
 
    
 
    function saveSettings() { 
 
    localStorage.reak00 = $('#reak00').val(); 
 
    localStorage.rebk00 = $('#rebk00').val(); 
 
    localStorage.reck00 = $('#reck00').val();  
 
    } 
 
    
 
    
 
    
 
    
 
    var assignHandlers = function(selectorOne, selectorTwo, selectorThree){ 
 
     return function(){ 
 

 
      var distanza = $(selectorOne); 
 
      $(selectorTwo).on('focus change', function(){ 
 
       var posizione = $(this).val(); 
 
       distanza.css({left:posizione}).animate({ 
 
        'left': (posizione *100/200) 
 
       }); 
 
      }); 
 

 

 
      $(selectorTwo).on('focus change', function(){ 
 
        r = $(selectorTwo).val().toString(16); 
 
        var opacityRed = r/100;   
 
        $(selectorThree).css("background-color", "rgba(255,255,255," + opacityRed + ")"); 
 
        $(selectorThree).css("box-shadow", "0 0 25px rgba(255,127,50," + opacityRed + ")"); 
 

 
      }); 
 
     }; 
 
     }; 
 
    $(document).ready(assignHandlers('.fkbtn01', '.reak00', "#fbs01")); 
 
    $(document).ready(assignHandlers('.fkbtn02', '.rebk00', "#fbs02")); 
 
    $(document).ready(assignHandlers('.fkbtn03', '.reck00', "#fbs03")); 
 
    
 
    $(function(){ 
 
     document.getElementById('reak00').focus(); 
 
     document.getElementById('rebk00').focus(); 
 
     document.getElementById('reck00').focus(); 
 
    });

#recorder01 { position: absolute; visibility: visible; left: 131px; top: 50px; z-index: 150; } 
 
    #recorder02 { position: absolute; visibility: visible; left: 131px; top: 104px; z-index: 150; } 
 
    #recorder03 { position: absolute; visibility: visible; left: 131px; top: 158px; z-index: 150; } 
 
    #recarea01 { position: absolute; visibility: visible; left: 180px; top: 50px; z-index: 100; } 
 
    #recarea02 { position: absolute; visibility: visible; left: 180px; top: 104px; z-index: 100; } 
 
    #recarea03 { position: absolute; visibility: visible; left: 180px; top: 158px; z-index: 100; } 
 
    #offarea01 { position: absolute; visibility: visible; left: 180px; top: 50px; z-index: 50; } 
 
    #offarea02 { position: absolute; visibility: visible; left: 180px; top: 104px; z-index: 50; } 
 
    #offarea03 { position: absolute; visibility: visible; left: 180px; top: 158px; z-index: 50; } 
 
    input[type=range] { 
 
     -webkit-appearance: none; 
 
     width: 100%; 
 
     height:100%; 
 
    } 
 
     input:focus, textarea:focus { 
 
     outline: none; 
 
    } 
 
     
 
    .fkbtn01, .fkbtn02, .fkbtn03 { 
 
      position: absolute; 
 
      width: 50px; 
 
      opacity: 0.4; 
 
     } 
 
     
 
     .fkbtn01, .fkbtn02, .fkbtn03 input { 
 
     -webkit-appearance: none; 
 
     width: 100px; 
 
     height: 50px; 
 
     } 
 
     .fkbtn01, .fkbtn02, .fkbtn03 input::-webkit-slider-thumb { 
 
     
 
     height:50px; 
 
     width: 50px; 
 
     } 
 
    
 
    .fakblsfondo { 
 
     background-color: ccc; 
 
     height:50px; 
 
     width: 50px; 
 
     border-radius:4px; 
 
     box-shadow: 0 0 25px #FF9900; 
 
    
 
    } 
 
    
 
    .offb { 
 
     background-color: grey; 
 
     height:50px; 
 
     width: 50px; 
 
     border-radius:4px; 
 
     opacity: 1 ; 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
    <div id="recorder01"> 
 
    <div class="fkbtn01"> 
 
    <input type="range" class="reak00" id="reak00" min="0" max="100" step="100" /> 
 
    </div> 
 
    </div> 
 
    <div id="recarea01"> 
 
    <div class="fakblsfondo" id="fbs01" ></div> 
 
    </div> 
 
    <div id="recorder02"> 
 
    <div class="fkbtn02"> 
 
    <input type="range" class="rebk00" id="rebk00" min="0" max="100" step="100" /> 
 
    </div> 
 
    </div> 
 
    <div id="recarea02"> 
 
    <div class="fakblsfondo" id="fbs02" ></div> 
 
    </div>  
 
    <div id="recorder03"> 
 
    <div class="fkbtn03"> 
 
    <input type="range" class="reck00" id="reck00" min="0" max="100" step="100" /> 
 
    </div> 
 
    </div> 
 
    <div id="recarea03"> 
 
    <div class="fakblsfondo" id="fbs03" ></div> 
 
    </div> 
 
    
 
    <div id="offarea01"> 
 
    <div class="offb" ></div> 
 
    </div> 
 
    <div id="offarea02"> 
 
    <div class="offb" ></div> 
 
    </div> 
 
    <div id="offarea03"> 
 
    <div class="offb" ></div> 
 
    </div>

Answer 1

.fkbtn01, .fkbtn02, .fkbtn03 input { 
.fkbtn01, .fkbtn02, .fkbtn03 input::-webkit-slider-thumb { 

当你这样做的CSS选择这样的，在最后的输入部分并不适用于它之前的所有字段。只有前一个。因为这些规则只影响与fkbtn03相关的输入。

例

.fkbtn01 input, .fkbtn02 input, .fkbtn03 input { 
.fkbtn01 input::-webkit-slider-thumb, .fkbtn02 input::-webkit-slider-thumb, .fkbtn03 input::-webkit-slider-thumb {