0
さまざまなバナーサイズを視覚的に表示する範囲スライダを作成しました。私は、.mousedownと.mouseupイベントがトリガされたときに、入力範囲のサムが背景色を変更できるようにする関数を作成しようとしています。私は単純なJQueryを使って親指を直接選択する方法がないことを読んだ。私はクラスの作成を読んで、.AddClassメソッドを使うのが一番です。Jqueryで入力[type = range]のサムスタイルを変更する - 動作しない
私はこれを自分自身で試みましたが、なぜ親が色を変えないのか分かりません。
私のコードを見ていただけますか？
https://codepen.io/stinkytofu3311/pen/LWomev
//1. When user clicks their mouse down on the Range-Thumb the thumbs background-color will change to blue.
$("#range-slider").on("mousedown", function() {
$(this).addClass("thumb-down");
});
//2. When user mouse up on the Range-Thumb the Thumbs background-color will change to Green.
$("#range-slider").on("mouseup", function() {
$(this).addClass("thumb-up");
});
問題は解決しました！ここでは、固定バージョンhttps://codepen.io/stinkytofu3311/pen/OpKKMd
var imageUrl = new Array();
imageUrl[0] = 'http://svgshare.com/i/1Ak.svg';
imageUrl[1] = 'http://svgshare.com/i/1AQ.svg';
imageUrl[2] = 'http://svgshare.com/i/1Bb.svg';
imageUrl[3] = 'http://svgshare.com/i/1Am.svg';
imageUrl[4] = 'http://svgshare.com/i/1CG.svg';
imageUrl[5] = 'http://svgshare.com/i/1By.svg';
$(document).on('input change', '#range-slider', function() {//listen to slider changes
var v=$(this).val();//getting slider val
$('#sliderStatus').html($(this).val());
$("#img").prop("src", imageUrl[v]);
});
// ::::: Range Slider Thumb ::::: //
//1. When user clicks their mouse down on the Range-Slider
$("#range-slider").on("mousedown", function() {
//1.1 Remove default class from CSS, and add the class .thumb-down (changes background color)
$(this).removeClass().addClass("thumb-down");
//1.2 Remove default class from CSS, and add the class .hover-ring (changes box-shadow to a green color)
$(this).removeClass().addClass("hover-ring");
});
//2. When user mouse up on the Range-Slider the Thumbs background-color will change to Green
$("#range-slider").on("mouseup", function() {
//2.1 Add class .thumb-up
$(this).addClass("thumb-up");
$(this).addClass("hover-ring-out");
});.product-range-wrapper {
displat: -webkit-flex;
displat:flex;
-webkit-flex-direction: column;
flex-direction:column;
width:600px;
margin:0px auto;
/*outline: 1px solid purple;*/
}
.product-range-block {
display: -webkit-flex;
display:flex;
-webkit-flex-direction: row;
flex-direction: row;
width:100%;
height:300px;
/*outline: 1px solid red;*/
}
.ref-height-block {
flex-grow:3;
/*background-color:red;*/
}
.size-chart-block {
flex-grow:9;
/*background-color:green;*/
}
.product-range-block img {
width:90%;
/*outline: 1px solid blue;*/
}
#img {
width: 100% !important;
}
#slider_count {
margin:0px auto;
width:200px;
padding:20px 20px;
text-align:center;
background-color:yellow;
}
/* ::::::::::::::::::::Range Slider Styles::::::::::::::::::::::::: */
.range-slider-block {
margin:0px auto;
width:90%;
}
#range-slider {
padding:40px 0px;
width:100%;
/*outline: 1px solid green;*/
}
/* Remove Range Sliders Default Styles*/
input[type=range]{
-webkit-appearance: none;
}
/* Track */
input[type=range]::-webkit-slider-runnable-track {
height: 10px;
background: #d7d7d7;
border: none;
border-radius: 6px;
}
input[type=range]:focus {
outline: none;
}
/* Thumb */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 30px;
width: 30px;
border-radius: 50%;
background: #46947F;
margin-top: -9px;
transition: box-shadow 0.5s;
}
input[type=range]:hover::-webkit-slider-thumb {
box-shadow: 0 0 0 6pt rgba(190,190,190,0.4);
cursor:pointer;
}
/* JS Stykes */
/* Changes Thumb color to darker green when mousedownn */
input[type=range].thumb-down::-webkit-slider-thumb {
background:#316557;
}
/* Changes Thumb color back to light green when mouseup */
input[type=range].thumb-up::-webkit-slider-thumb {
background:#46947F;
}
/* Changes Ring color Green */
input[type=range].hover-ring::-webkit-slider-thumb {
box-shadow: 0 0 0 6pt rgba(70,148,127,0.46);
cursor:pointer;
}
input[type=range].hover-ring-out::-webkit-slider-thumb {
box-shadow: 0 0 0 0pt rgba(0,0,0,0);
cursor:pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-range-wrapper">
<div class="product-range-block">
<div class="ref-height-block">
<img src="http://svgshare.com/i/1Ba.svg" alt="Product Height Refrence" height="" width="">
</div>
<div class="size-chart-block">
<img src="http://svgshare.com/i/1Ak.svg" style='' id='img'/>
</div>
</div>
<div class="range-slider-block">
<input type="range" id="range-slider" value="0.0" min="0" max="5" step="1" />
</div>
</div>
<div id="slider_count">slider value = <span id="sliderStatus">0</span></div>
私が使用してお勧めしません！重要 – sm1215
'$（ "＃範囲スライダ"）。（ 'マウスダウン'、機能上の（）{$全く他の方法はありませんしない限り、 （ '＃range-slider'）。css（ 'background-color'、 'red'）;}）; 'あなたのためのオプションですか？ – TypedSource
インラインスタイルを使用せずにこれを行うこともできます – sm1215