我正在尝试构建一个表单,允许用户通过首先单击其首选颜色,然后单击目标对象(在本例中由DIV表示)来指定对象的颜色。我可以理解基本的Javascript(以及一些小jQuery),但我对如何处理这个问题感到迷茫。
这是一个基本的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"> </div>
<div style="background-color:#999999;" name="color1"> </div>
<div style="background-color:#FF0000;" name="color2"> </div>
<h4>Then click the squares to set them to the selected color(s):</h4>
<div name="square0"> </div>
<div name="square1"> </div>
<div name="square2"> </div>
<div name="square3"> </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>
答案 0 :(得分:0)
试试这个:http://jsfiddle.net/3Swtz/
var color;
$(".selection").click(function () {
color = $(this).css("background-color");
});
$(".selected").click(function(){
$(this).css("background-color", color)
});
答案 1 :(得分:0)
不要在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"> </div>
<div style="background-color:#999999;" id="color1"> </div>
<div style="background-color:#FF0000;" id="color2"> </div>
</div>
<h4>Then click the squares to set them to the selected color(s):</h4>
<div id="squareContainer">
<div id="square0"> </div>
<div id="square1"> </div>
<div id="square2"> </div>
<div id="square3"> </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>