选择一种颜色onclick，然后“绘制”另一个颜色的div？

-1

我试图建立一个表单，允许用户通过首先点击他们喜欢的颜色，然后目标对象（在这种情况下由DIV表示）来指定对象的颜色。我可以理解基本的Javascript（和一个小jQuery），但是我不知道如何处理这个问题。选择一种颜色onclick，然后“绘制”另一个颜色的div？

这里是一个基本的HTML页面，以说明我正在尝试做什么。有3种颜色可供选择 - 我猜onclick事件应该选择一种。这3种颜色下面是4个目标div。选择颜色并单击目标div后，其背景颜色应更改为所选颜色，并且隐藏窗体值应更改为颜色编号（0,1或2）。

解决这个问题的最简单方法是什么？

<html> 
<head> 
<style type="text/css"> 
div {background-color:#000000;width:25px;height:25px;margin:4px;float:left;} 
h4 {clear:both;padding-top:10px;} 
</style> 
</head> 
<body> 

<script language="JavaScript"> 
var colors = ["#0000FF", "#999999", "#FF0000"]; 
</script> 

<form name="myForm" action="form.html" method="get"> 

<h4>Select A Color:</h4> 
<div style="background-color:#0000FF;" name="color0">&nbsp;</div> 
<div style="background-color:#999999;" name="color1">&nbsp;</div> 
<div style="background-color:#FF0000;" name="color2">&nbsp;</div> 

<h4>Then click the squares to set them to the selected color(s):</h4> 
<div name="square0">&nbsp;</div> 
<div name="square1">&nbsp;</div> 
<div name="square2">&nbsp;</div> 
<div name="square3">&nbsp;</div> 

<input type="hidden" name="square0" value=""> 
<input type="hidden" name="square1" value=""> 
<input type="hidden" name="square2" value=""> 
<input type="hidden" name="square3" value=""> 

<input type="submit" value="Save The Colors!"> 

</form> 

</body> 
</html>

来源

2013-10-08 JoyMonkey

创建一个http://jsfiddle.net –

看起来像一个很好的设置..我建议你尝试一些JavaScript。让我们知道你的尝试和错误。 – showdev

正如@showdev所示。你需要使用JavaScript和可能的jQuery。没有人会为你这样做，因为它太宽泛，你没有做任何尝试。如果你遇到特定方面的问题，请提出问题。 – Liam

不要在div的使用的名称。使用ID或类。

<html> 
<head> 
<style type="text/css"> 
div#colorSelection div{ 
    width:100px; 
    height:100px; 
} 
div#squareContainer div{ 
    border:1px solid black; 
    width:100px; 
    height:100px; 
} 
div.selectedColor{ 
    border:1px solid black; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
</head> 
<body> 

<script language="JavaScript"> 
var colors = ["#0000FF", "#999999", "#FF0000"]; 
</script> 

<form name="myForm" action="form.html" method="get"> 

<h4>Select A Color:</h4> 
<div id="colorSelection"> 
    <div style="background-color:#0000FF;" id="color0">&nbsp;</div> 
    <div style="background-color:#999999;" id="color1">&nbsp;</div> 
    <div style="background-color:#FF0000;" id="color2">&nbsp;</div> 
</div> 

<h4>Then click the squares to set them to the selected color(s):</h4> 
<div id="squareContainer"> 
    <div id="square0">&nbsp;</div> 
    <div id="square1">&nbsp;</div> 
    <div id="square2">&nbsp;</div> 
    <div id="square3">&nbsp;</div> 
</div> 

<input type="hidden" name="square0" value=""> 
<input type="hidden" name="square1" value=""> 
<input type="hidden" name="square2" value=""> 
<input type="hidden" name="square3" value=""> 

<input type="submit" value="Save The Colors!"> 

</form> 

<script> 
$('div#colorSelection').on('click', 'div', function(event){ 
    $('div.selectedColor').removeClass('selectedColor'); 
    $(this).addClass('selectedColor'); 
}) 
$('div#squareContainer').on('click', 'div', function(event){ 
    var color = $('div.selectedColor').css('background-color'); 
    var squareId = $(this).id; 

    $(this).css({"background-color":color}); 
    $('input[name="'+squareId+'"]').val(color); 

}); 
</script> 

</body> 
</html>

来源

2013-10-08 18:06:29 carter

试试这个：http://jsfiddle.net/3Swtz/

var color; 

$(".selection").click(function() { 
    color = $(this).css("background-color"); 
}); 

$(".selected").click(function(){ 
    $(this).css("background-color", color) 
});

来源

2013-10-08 16:48:42 user1

这看起来很完美，谢谢！现在我只需要弄清楚如何让隐藏的输入值改变以匹配选定的颜色。 – JoyMonkey

不要忘了投票并标记为答案 – user1

选择一种颜色onclick，然后“绘制”另一个颜色的div？

回答

相关问题