4
バーの色を変更する：範囲セレクタ - 私はあなたがスライダーにクリックまたがる応じて使用されているアイテムの価格と量を変更し、私が作成した価格のスライダーを持っている場合にのみアクティブ
.price-slider {
margin-bottom: 29px;
width: 254px;
}
.price-slider .slider-count {
font-size: 13px!important;
font-weight: 600;
margin-bottom: 13px;
}
.price-slider .price-slider-box {
position: relative;
height: 12px;
margin-top: 12px;
}
.price-slider .price-slider-box .price-slider-bar {
position: relative;
height: 3px;
top: 5px;
background-color: #ddd;
cursor: pointer;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc {
position: absolute;
top: -5px;
height: 12px;
width: 12px;
background-color: #ddd;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-2 {
left: 28px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-3 {
left: 60px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-4 {
left: 92px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc .price-slider-disc-5 {
left: 124px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-6 {
left: 156px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-7 {
left: 188px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-8 {
left: 220px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-9 {
left: 252px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-active {
background-color: #54d8a3;
}
.price-slider .price-slider-box .price-slider-bar .slider-handle {
position: absolute;
height: 19px;
width: 19px;
cursor: pointer;
outline: none;
margin-left: -5px;
margin-top: -5px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background-color: #f4f4f4;
z-index: 1;
}
.price-slider .price-slider-box .price-slider-range {
background-color: #54d8a3;
width: 0;
height: 3px;
position: absolute;
left: 0;
top: 5px;
}<div class="price-slider">
<h2 class="slider-count"><span class="js-slider-count" data-count="starter">100</span> items/month</h2> <!-- HERE -->
<div class="price-slider-box">
<div class="price-slider-bar">
<span data-option="starter" data-price-value="24" data-count-value="100" class="price-slider-disc price-slider-disc-2 price-slider-disc-active"></span>
<span data-option="starter" data-price-value="30" data-count-value="200" class="price-slider-disc price-slider-disc-3"></span>
<span data-option="starter" data-price-value="40" data-count-value="300" class="price-slider-disc price-slider-disc-4"></span>
<span data-option="starter" data-price-value="50" data-count-value="400" class="price-slider-disc price-slider-disc-5"></span>
<span data-option="starter" data-price-value="60" data-count-value="500" class="price-slider-disc price-slider-disc-6"></span>
<span data-option="starter" data-price-value="70" data-count-value="600" class="price-slider-disc price-slider-disc-7"></span>
<span data-option="starter" data-price-value="80" data-count-value="700" class="price-slider-disc price-slider-disc-8"></span>
<span data-option="starter" data-price-value="90" data-count-value="800" class="price-slider-disc price-slider-disc-9"></span>
</div>
</div>
</div>そして私はその結果を達成するために、このスクリプトを使用しています：
$('[data-option]').click(function() {
var type = this.getAttribute('data-option');
var value = this.getAttribute('data-price-value');
var count = this.getAttribute('data-count-value');
var priceContainer = document.querySelector('[data-price="' + type + '"]');
var countContainer = document.querySelector('[data-count="' + type + '"]');
if (typeof priceContainer !== 'undefined' && priceContainer !== null) {
priceContainer.innerHTML = value;
}
if (typeof countContainer !== 'undefined' && countContainer !== null) {
countContainer.innerHTML = count;
}
var options = document.querySelectorAll('[data-option="' + type + '"]');
for (var i = 0, l = options.length; i < l; i++) {
if (options[i].getAttribute('data-price-value') <= value) {
$(options[i]).addClass('price-slider-disc-active');
} else {
$(options[i]).removeClass('price-slider-disc-active');
}
}
});
はしかし、私はトンの後ろにバーを取得して苦労していますスパンが選択されると、彼は色を変えるようにスパンします。私はアクティブなクラスを追加しようとしましたが、バー全体が緑色になります。選択したスパンの左側にあるバーが緑色になり、その前にあるバーがグレーのままになります。どのように私はアクティブなクラスを使用せずにこれを達成することができますか？