在循环中迭代3个不同的RGB滑块

Question

我想让我的代码更紧凑。目前我有3个不同的滑块。一个代表红色，一个代表绿色，一个代表蓝色。我想让我的代码更紧凑，并且使用循环来迭代这些滑块的难度更小。

var selection;

$(".slider").slider({
    min: 0, 
    max: 255,
    slide: function(event, ui) {
        selection = $(this).slider( "value" );

        var id = $(this).attr('id');

        if(id == 'slider-1'){
            RedBG = selection;
        }

        if(id == 'slider-2'){
            GreenBG = selection;
        }

        if(id == 'slider-3'){
            BlueBG = selection;
        }
    }
});

Answer 1

使其更简洁的一种方法是将RGB值存储为对象的属性，并设置关键帧以匹配每个滑块的id属性，如下所示：

​

let $output = $('#output');
let rgb = {
  red: 0,
  green: 0,
  blue: 0
}

$(".slider").slider({
  min: 0,
  max: 255,
  slide: function(event, ui) {
    rgb[this.id] = $(this).slider("value");
    $output.text(JSON.stringify(rgb)); // for demo purposes only
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div class="slider" id="red"></div>
<div class="slider" id="green"></div>
<div class="slider" id="blue"></div>

<div id="output"></div>

​

必要时，您可以通过rgb对象访问值，例如。rgb.red