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 {