奇妙なことが起こっています。すべてのボタンを同じ方法で処理する関数がありますが、そうではありません。エラーが見つかりません。3 番目のボタンのみが正しく動作します。入力範囲 div が移動して反対側に配置されるため、切り替えることができます。
左のアニメーションまたは 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> .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 {
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加