javascript – 范围选择器 – 仅在激活时更改条形颜色

2023年9月27日 158次阅读

我有一个我创建的价格滑块,可以根据您在滑块中单击的范围更改所用项目的价格和数量：

.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');
     }
   }
 });

但是,当选择范围时,我很难在跨度后面找到更改颜色的条形图.我尝试过为它添加一个活动类,但它只是使整个条形绿色,我想要的是所选范围左边的条形为绿色,右边的任何条形图都保持灰色.如何在不使用活动类的情况下实现此目的？

最佳答案 你可以做的是使用伪元素来模仿线.目前,该栏是一个没有中断的实心栏,因此您必须在元素之间创建一个栏,使其看起来像所选：

https://jsfiddle.net/5r0n62yg/1/

.price-slider-disc-active::before {
  width: 21px;
  height: 3px;
  background: green;
  display: block;
  position: absolute;
  left: -21px;
  top: 5px;
  content:'';
}
点赞