Question

我在一个页面上有十二个滑块，我希望单独处理这些手柄以使用所有不同的颜色。我正在使用.each来构建滑块。

    //jquery sliders
    $(function() {
    $("#eq > span").each(function() {
      $( this ).empty().slider({
        orientation: "horizontal",
        animate: true,
        value: 10,
        min: 0,
        max: 10,
        step: 1,
        slide: function( event, ui ) {
          var val = $(this).attr('id');
          weights[val] = ui.value;
          updateSvg();
          if (typeof areaSelected !== 'undefined') {showPiechart(areaSelected); }
          }
        });
      });
     });

在HTML中它看起来像这样。每个范围都有一个ID：

 <div id="eq"> 
    <span id="sl11"></span>
 </div>

但是，我认为我不能使用此ID来更改滑块本身的颜色。我找到了解决方案（http://jqueryui.com/demos/slider/#colorpicker），其中每个滑块都单独构建，然后调整颜色，但不是在使用.each构建滑块时。

提前致谢！

Answer 1

我认为你有很多选择：

1）随机化每个循环内的颜色：

$(function() {
      $("#eq > span").each(function() {
        $(this).slider({
          orientation: "horizontal",
          animate: true,
          value: 10,
          min: 0,
          max: 10,
          step: 1
        });

        //randomize color
        var randRed = Math.floor(Math.random() * 255);
        var randGreen = Math.floor(Math.random() * 255);
        var randBlue = Math.floor(Math.random() * 255);
        $(this).css({
          "background": "rgb(" + randRed + "," + randGreen + "," + randBlue + ")"
        });
      });
    });

#eq > span {
  float: left;
  clear: left;
  width: 300px;
  margin: 15px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="eq"> <span id="sl1"></span>
  <span id="sl2"></span>
  <span id="sl3"></span>

</div>

2）使用#eq框内的索引访问滑块：

$(function() {
      $("#eq > span").each(function() {
        $(this).slider({
          orientation: "horizontal",
          animate: true,
          value: 10,
          min: 0,
          max: 10,
          step: 1
        });
      });

      $("#eq > span").eq(0).css({
        "background": "red"
      });
      $("#eq > span").eq(1).css({
        "background": "green"
      });
      $("#eq > span").eq(2).css({
        "background": "blue"
      });
    });

#eq > span {
  float: left;
  clear: left;
  width: 300px;
  margin: 15px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="eq"> <span id="sl1"></span>
  <span id="sl2"></span>
  <span id="sl3"></span>

</div>

3）直接使用他们的ID：

    $(function() {
      $("#eq > span").each(function() {
        $(this).slider({
          orientation: "horizontal",
          animate: true,
          value: 10,
          min: 0,
          max: 10,
          step: 1
        });
      });

      $("#sl1").css({
        "background": "red"
      });
      $("#sl2").css({
        "background": "green"
      });
      $("#sl3").css({
        "background": "blue"
      });
    });

#eq > span {
  float: left;
  clear: left;
  width: 300px;
  margin: 15px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="eq"> <span id="sl1"></span>
  <span id="sl2"></span>
  <span id="sl3"></span>

</div>

4）使用ID：

对css中的样式进行硬编码

    $(function () {
        $("#eq > span").each(function () {
            $(this).slider({
                orientation: "horizontal",
                animate: true,
                value: 10,
                min: 0,
                max: 10,
                step: 1
            });
        });
    });

#eq > span {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
}
#sl1{
    background:purple;
}
#sl2{
    background:lime;
}
#sl3{
    background:orange;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="eq"> <span id="sl1"></span>
 <span id="sl2"></span>
 <span id="sl3"></span>

</div>

5）使用nth-child()选择器按索引格式访问css

    $(function() {
      $("#eq > span").each(function() {
        $(this).slider({
          orientation: "horizontal",
          animate: true,
          value: 10,
          min: 0,
          max: 10,
          step: 1
        });
      });
    });

#eq > span {
  float: left;
  clear: left;
  width: 300px;
  margin: 15px;
}
#eq > span:nth-child(1) {
  background: black;
}
#eq > span:nth-child(2) {
  background: yellow;
}
#eq > span:nth-child(3) {
  background: brown;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="eq"> <span id="sl1"></span>
  <span id="sl2"></span>
  <span id="sl3"></span>

</div>

并且列表一直在继续......

JQuery UI：多个滑块，具有不同的句柄css

1 个答案: