Javascript, gleichen Code, verschiedene Tasten Fehler

Question

Etwas seltsames passiert, ich habe eine Funktion, die alle Tasten auf die gleiche Weise verarbeiten sollte, aber es tut es nicht. Ich kann den Fehler nicht finden. Nur der dritte Button funktioniert richtig. Der Eingabebereich div bewegt sich und platziert sich auf der anderen Seite, sodass Sie es umschalten können.

Fiddle

Ich nehme an, es ist ein Problem mit den linken belebten oder mit CSS Variablen.

$(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 { 

Wenn Sie das tun CSS-Selektoren wie dieser, der Eingangsteil am Ende gilt nicht für alle Felder, die vor ihm da war. Nur der unmittelbar vorhergehende. Diese Regeln betreffen nur die mit fkbtn03 verbundenen Eingänge.

Beispiel

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