-1

ユーザーが最初に好みの色をクリックし、次にターゲット オブジェクト (この場合は 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">&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>
4

2 に答える 2

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">&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-08T18:06:29.527 に答える
0

これを試してください：http://jsfiddle.net/3Swtz/

var color;

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

$(".selected").click(function(){
   $(this).css("background-color", color)
});
于 2013-10-08T16:48:42.217 に答える