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');
}
}
});
不過，我有一個很難得到背後t時的條當跨度被選擇時，他跨越改變顏色。我曾嘗試添加一個活動的類，但它只是使整個酒吧變成綠色，我想要的是所選跨度左側的酒吧爲綠色，任何酒吧前面的酒吧保持灰色。如何在不使用活動類的情況下實現這一目標？