javascript - 如何在每个自定义范围步骤上更改图标的颜色

标签 javascript html css

我有一个自定义范围，我已经设置了样式并进行了修改。

对于每个步骤，在范围下方的绿色框中都有一个文本值，每个步骤的顶部都有图标。

enter image description here
我想知道，如何在选择步骤后更改图标的背景颜色？我添加了一些无法正常工作的额外 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>

最佳答案

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

关于javascript - 如何在每个自定义范围步骤上更改图标的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50771220/

上一篇：javascript - 我如何在 jQuery 中链接 .html() 和 .fadeIn()？

下一篇：Javascript JSON.stringify 返回 []

相关文章：

javascript - 使用 HTML 和 Phonegap 设置移动应用程序的大小

javascript - 我在输入的待办事项元素旁边显示日期时遇到问题。 ChangeDate() 函数有什么问题？

javascript - Canvas 中每个上下文有多个剪辑调用

javascript - 文本区域中的输入类型

javascript - SVG 元素在容器的左上角说

html - 在 < 768px 上给 Bootstrap 横幅更高的高度

javascript - 我需要匹配文本的特定部分并使用 jquery 获取以下数字

javascript - 有没有办法将 HTML 列表(UL、LI)保存到文件中，然后检索并显示它？

javascript - 有什么方法可以从他们制作的 Bootstrap 模板(带有 HTML)下载并在官方网站上作为示例显示

html - 页脚不会自动向下移动页面

©2024 IT工具网  联系我们