Question

我有一个按预期工作的颜色选择器

HTML：

<input id="cyan" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">  
<input id="magenta" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">  
<input id="yellow" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">

JavaScript的：

var colorPicker = document.getElementsByClassName( "colorPicker" );
for( var i = 0; i < colorPicker.length; i++ )
{
  colorPicker[i].addEventListener( "input", function(){
    var cyan = document.getElementById( "cyan" ).value,
        magenta = document.getElementById( "magenta" ).value,
        yellow = document.getElementById( "yellow" ).value;

    document.body.style.backgroundColor = "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
    localStorage.setItem( "cyan", cyan );
    localStorage.setItem( "magenta", magenta );
    localStorage.setItem( "yellow", yellow );
  });
}

我希望能够在屏幕上使用相同的一个颜色选择器，但有一个单选按钮或下拉选择其他颜色值来更改。

希望这很清楚。我是JavaScript新手，知道它强大而灵活。我只是不知道如何实现这一目标。

感谢。

Answer 1

你的意思是这样的？我已经添加了HTML select元素和附加事件。

var colorPicker = document.getElementsByClassName( "colorPicker" );
for( var i = 0; i < colorPicker.length; i++ )
{
  colorPicker[i].addEventListener( "input", function(){
    var cyan = document.getElementById( "cyan" ).value,
        magenta = document.getElementById( "magenta" ).value,
        yellow = document.getElementById( "yellow" ).value;

    document.body.style.backgroundColor = "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
    localStorage.setItem( "cyan", cyan );
    localStorage.setItem( "magenta", magenta );
    localStorage.setItem( "yellow", yellow );
  });
}

var colorPickerSelect = document.getElementById("colorPickerSelect");
colorPickerSelect.addEventListener('change', function() {
	document.body.style.backgroundColor = colorPickerSelect.value;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="cyan" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">  
<input id="magenta" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">  
<input id="yellow" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">  
<br/>
<select id="colorPickerSelect">
  <option>red</option>
  <option>green</option>
  <option>blue</option>
</select>

Answer 2

VIPIN，

非常感谢你的帖子。你让我思考，我想出来了。以下解决方案运行良好。只需要进行一些小调整即可获得准确的预期行为。

HTML：

<input id="cyan" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">
<input id="magenta" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">
<input id="yellow" class="colorPicker" style="vertical-align: middle;" class="grabbable" type="range" min="0" max="255" step="1" value="255">

<select id="colorPickerSelect" style="cursor: pointer;" onchange="colorPickerSelect( this.value );">
  <option value=""></option>
  <option value="background">Background</option>
  <option value="titleBackground">Title BG</option>
  <option value="titleText">Title Text</option>
  <option value="border">Border</option>
</select>

JavaScript的：

function assignColorPicker( )
{
  var type = document.getElementById( "colorPickerSelect" ).value;
  var cyan = document.getElementById( "cyan" ).value,
      magenta = document.getElementById( "magenta" ).value,
      yellow = document.getElementById( "yellow" ).value;
  if( type == 'background' )
  {
    document.body.style.backgroundColor = "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
  }
  else if( type == 'titleBackground' )
  {
    document.styleSheets[3].cssRules[1].style.backgroundColor = "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
  }
    else if( type == 'titleText' )
  {
    document.styleSheets[3].cssRules[4].style.color = "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
  }
  else if( type == 'border' )
  {
    document.styleSheets[3].cssRules[0].style.border = '1px solid ' + "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
    document.styleSheets[3].cssRules[2].style.color = "rgb(" + cyan + ", " + magenta + ", " + yellow + ")";
  }
}

function colorPickerSelect( )
{
  var colorPicker = document.getElementsByClassName( "colorPicker" );
  for( var i = 0; i < colorPicker.length; i++ )
  {
    colorPicker[i].removeEventListener( "input", assignColorPicker );
    colorPicker[i].addEventListener( "input", assignColorPicker );
  }
}

一种用于多种颜色的颜色选择器（背景，前景和文本）

2 个答案: