Question

我创建了一个价格滑块，可根据您在滑块中点击的范围更改所用商品的价格和数量：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我正在使用此脚本来实现这一结果：

 $('[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');
     }
   }
 });

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

Answer 1

你可以做的是使用一个伪元素来模仿这条线。目前，该栏是一个没有中断的实心栏，因此您必须在元素之间创建一个栏，使其看起来像选中的那样：

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

#!/bin/bash -v

minToRestart=5
restartMessage="Software installations have completed.

Your Mac will automatically reboot in '$minToRestart' minutes.

If you want to restart immediately instead, click the \"Restart Now\" button."

osascript -e 'on run {argv}' -e 'display dialog argv with title "Software Update > Updates Complete" buttons {"OK", "Restart Now"} default button "Restart Now"' -e 'end run' $restartMessage

Answer 2

$('[data-option]').click(function () {
    $(this).css('color','green');
}

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

2 个答案: