循环遍历 3 个不同的 RGB 滑块答案

【问题标题】：Iterate through 3 different sliders for RGB in loop循环遍历 3 个不同的 RGB 滑块
【发布时间】：2020-06-03 19:33:58
【问题描述】：

我想让我的代码更紧凑。目前我有 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;
        }
    }
});

【问题讨论】：

为什么？你得到的代码很清楚而且很中肯。我怀疑您是否会通过使其更紧凑来使其更容易理解。
是的，我需要它来完成任务:-)
那么，如果这是作业，我建议您自己完成作业。否则你不会学到（无论他们想用这个作业教什么）。
是的，我试图让它工作，但到目前为止没有任何运气。我不需要答案，只要指向正确的方向即可。
如果您已经尝试过，请将其包含在问题中。

标签： javascript jquery loops for-loop slider

【解决方案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

【讨论】：