onclick 색상을 선택한 다음 다른 색상으로 "페인트"하시겠습니까?

-1

우선 사용자가 원하는 색상을 클릭 한 다음 대상 객체 (이 경우 DIV로 표시)를 클릭하여 객체의 색상을 지정할 수있는 양식을 작성하려고합니다. 나는 기본적인 자바 스크립트 (그리고 약간의 jQuery)를 이해할 수 있지만, 어떻게 접근해야하는지에 관해서는 분실했다.onclick 색상을 선택한 다음 다른 색상으로 "페인트"하시겠습니까?

다음은 기본적으로 내가하려는 일을 설명하는 기본 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 –

만들기 좋은 설정처럼 보입니다. 나는 당신이 자바 스크립트를 시도하는 것이 좋습니다. 우리가 시도한 것과 무엇이 잘못되었는지 알려주십시오. – showdev

마찬가지로 @showdev가 제안합니다. 자바 스크립트와 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 색상을 선택한 다음 다른 색상으로 "페인트"하시겠습니까?

답변

관련 문제