如何在每個自定義范圍步驟上更改圖標的顏色

Question

我有樣式和修改過的自定義范圍。

對於每個步驟，在范圍下方的綠色框中顯示一個文本值，並在每個步驟的頂部顯示圖標。

我想知道，選擇步驟后如何更改圖標的背景色？ 我添加了一些無法正常運行的其他JavaScript代碼。

例如，在第一步中，組圖標將為綠色，而當您選擇下一步時，人員將為綠色，並且該組將更改為默認的灰色，依此類推……

謝謝。

 var arr = new Array(); arr[1] = "everyone"; arr[2] = "show my group only"; arr[3] = "show only me"; var rangeSlider = function() { var slider = $(".range-slider"), range = $(".range-slider__range"), value = $(".range-slider__value"); slider.each(function() { value.each(function() { var value = $(this) .prev() .attr("value"); $(this).html(arr[value]); }); range.on("input", function() { $(this) .next(value) .html(arr[this.value]); }); // Set active icons $('.range-icons li').removeClass('active selected'); var icons = $('.range-icons').find('li:nth-child(' + icons + ')'); icons.addClass('active selected'); return style; }); }; rangeSlider(); 

 *, *:before, *:after { box-sizing: border-box; } body { font-family: sans-serif; padding: 60px 20px; } @media (min-width: 600px) { body { padding: 60px; } } .range-slider { margin: 0; } .range-slider { width: 24%; } .range-slider__range { -webkit-appearance: none; /*width: calc(100% - (73px));*/ width: 100%; height: 6px; border-radius: 5px; background: #d7dcdf; outline: none; padding: 0; margin: 0; } .range-slider__range::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #2c3e50; cursor: pointer; transition: background .15s ease-in-out; } .range-slider__range::-webkit-slider-thumb:hover { background: #1abc9c; } .range-slider__range:active::-webkit-slider-thumb { background: #1abc9c; } .range-slider__range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #2c3e50; cursor: grab; transition: background .15s ease-in-out; } .range-slider__range:active::-moz-range-thumb { cursor: grabbing; background: #1abc9c; } .range-slider__range::-moz-range-thumb:hover { background: #1abc9c; } .range-slider__value { display: block; position: relative; color: #fff; font-size: 12px; margin-top: 10px; line-height: 20px; text-align: center; background: green; padding: 0; } /*.range-slider__value:after { position: absolute; top: 8px; left: -7px; width: 0; height: 0; border-top: 7px solid transparent; border-right: 7px solid #2c3e50; border-bottom: 7px solid transparent; content: ''; }*/ ::-moz-range-track { background: #d7dcdf; border: 0; } input::-moz-focus-inner, input::-moz-focus-outer { border: 0; } /*.range-labels { margin: 9px -21px 0; padding: 0; list-style: none; } .range-labels li { position: relative; float: left; width: 60px; text-align: center; color: #b2b2b2; font-size: 14px; cursor: pointer; } .range-labels .active { color: #37adbf; } .range-labels .selected::before { background: #37adbf; } .range-labels .active.selected::before { display: none; }*/ /*icons*/ .range-icons { margin: 9px -20px 0; padding: 0; list-style: none; } .range-icons li { position: relative; float: left; width: 33%; text-align: center; color: #b2b2b2; font-size: 10px; } .range-icons .active { color: #37adbf; } .range-icons .selected::before { background: #37adbf; } .range-icons .active.selected::before { display: none; } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div class="range-slider"> <ul class="range-icons clearfix"> <li class="active selected"><i class="material-icons">group</i></li> <li><i class="material-icons">person</i></li> <li><i class="material-icons">lock</i></li> </ul> <input class="range-slider__range" type="range" value="1" min="1" max="3" step="1"> <span class="range-slider__value">0</span> </div> 

Answer 1

您可以創建類，並在范圍輸入在range.on("input",范圍內更改時，使用addClass添加適當的類。

$('.material-icons:nth('+ ( this.value - 1) +')').addClass('class-'+(this.value))

因為您的this.value從1開始：

 var arr = new Array(); arr[1] = "everyone"; arr[2] = "show my group only"; arr[3] = "show only me"; var rangeSlider = function() { var slider = $(".range-slider"), range = $(".range-slider__range"), value = $(".range-slider__value"); slider.each(function() { value.each(function() { var value = $(this) .prev() .attr("value"); $(this).html(arr[value]); }); range.on("input", function() { $(this) .next(value) .html(arr[this.value]); $('.material-icons').attr('class', 'material-icons') $('.material-icons:nth('+ ( this.value - 1) +')').addClass('material-icons class-'+(this.value)) }); }); }; rangeSlider(); 

 *, *:before, *:after { box-sizing: border-box; } body { font-family: sans-serif; padding: 60px 20px; } @media (min-width: 600px) { body { padding: 60px; } } .range-slider { margin: 0; } .range-slider { width: 24%; } .range-slider__range { -webkit-appearance: none; /*width: calc(100% - (73px));*/ width: 100%; height: 6px; border-radius: 5px; background: #d7dcdf; outline: none; padding: 0; margin: 0; } .range-slider__range::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #2c3e50; cursor: pointer; transition: background .15s ease-in-out; } .range-slider__range::-webkit-slider-thumb:hover { background: #1abc9c; } .range-slider__range:active::-webkit-slider-thumb { background: #1abc9c; } .range-slider__range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #2c3e50; cursor: grab; transition: background .15s ease-in-out; } .range-slider__range:active::-moz-range-thumb { cursor: grabbing; background: #1abc9c; } .range-slider__range::-moz-range-thumb:hover { background: #1abc9c; } .range-slider__value { display: block; position: relative; color: #fff; font-size: 12px; margin-top: 10px; line-height: 20px; text-align: center; background: green; padding: 0; } /*.range-slider__value:after { position: absolute; top: 8px; left: -7px; width: 0; height: 0; border-top: 7px solid transparent; border-right: 7px solid #2c3e50; border-bottom: 7px solid transparent; content: ''; }*/ ::-moz-range-track { background: #d7dcdf; border: 0; } input::-moz-focus-inner, input::-moz-focus-outer { border: 0; } /*.range-labels { margin: 9px -21px 0; padding: 0; list-style: none; } .range-labels li { position: relative; float: left; width: 60px; text-align: center; color: #b2b2b2; font-size: 14px; cursor: pointer; } .range-labels .active { color: #37adbf; } .range-labels .selected::before { background: #37adbf; } .range-labels .active.selected::before { display: none; }*/ /*icons*/ .range-icons { margin: 9px -20px 0; padding: 0; list-style: none; } .range-icons li { position: relative; float: left; width: 33%; text-align: center; color: #b2b2b2; font-size: 10px; } /* classes with colors you want */ .class-1{ color: red; } .class-2{ color: blue; } .class-3{ color: orange; } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div class="range-slider"> <ul class="range-icons clearfix"> <li class="active selected"><i class="material-icons class-1">group</i></li> <li><i class="material-icons">person</i></li> <li><i class="material-icons">lock</i></li> </ul> <input class="range-slider__range" type="range" value="1" min="1" max="3" step="1"> <span class="range-slider__value">0</span> </div> 

Answer 2

我使用的一種方法是使用svg圖標並實現原始代碼。 然后，您可以使用小節和樣式設置來操縱此源。 查看svg源內部並查找路徑和rect標簽。

 document.getElementById("ranger").onchange = function(event) { document.querySelector(".symbol.standard").style.fill = "rgb(" + event.target.value + ", 80, 160)"; } 

 svg { width:200px; .symbol.standard { fill: #f00; } .symbol.other { fill: rgb(80, 80, 160); } 

 <input id="ranger" type='range' min="0" max="255"> <svg class="singleseat " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.3 63.3"> <title>seat</title> <rect class="symbol standard" x="16.7" width="57" height="49" rx="12" ry="12"></rect> <path class="symbol other" d="M79.9,15.8V42.3a12,12,0,0,1-12,12H22.5a12,12,0,0,1-12-12V15.8H0V51.3a12,12,0,0,0,12,12H78.3a12,12,0,0,0,12-12V15.8Z"></path> </svg>