Question

所以这是我的目标，我需要能够确定用户点击的div的背景颜色。每个div都有一个确定其背景的函数。我如何使用javascript来跟踪功能，或者将数据发送到网址更容易，以便将其与预定代码进行比较？

<?php "session_start" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<?php

$cols = array(

"#000000",
"#FFFFFF",
"#0000FF",
"#008000",
"#800080",
"#FF0000",
"#FFFF00",
"#DD7500",
"#4FD5D6",
"#CD6090", 
);

function getRandomColor1() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}





function getRandomColor2() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];    
unset($cols[$rand]);
return $rand_col;
}



function getRandomColor3() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}


function getRandomColor4() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}


function getRandomColor5() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand]; 
unset($cols[$rand]);
return $rand_col;
}



function getRandomColor6() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}


function getRandomColor7() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}


function getRandomColor8() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}


function getRandomColor9() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}


function getRandomColor10() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}




?> 



<style media="screen" type="text/css">
#full {
height: 300px;
width: 750px;
border: 3px solid #999; 
margin: 0 auto;

} 



#boxone1 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor1(); ?>; ;
float: left;
} 

#boxone2 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor2(); ?>;  
float: left;
} 
#boxone3 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor3(); ?>;  
float: left;
} 
#boxone4 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor4(); ?>; 
float: left;
} 
#boxone5 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor5(); ?>; 
float: left;
} 


#boxtwo1 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor6(); ?>; 
float: left;
} 

#boxtwo2 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor7(); ?>; 
float: left;
} 
#boxtwo3 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor8(); ?>; 
float: left;
} 
#boxtwo4 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor9(); ?>; 
float: left;
} 
#boxtwo5 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor10(); ?>; 
float: left;
} 

</style>






<body>

<div id="full">

<div id="boxone1" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxone2" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxone3" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxone4" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxone5" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxtwo1" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxtwo2" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxtwo3" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxtwo4" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxtwo5" onClick="window.location='?name='+this.id" style=""></div>
</div>
</div>



</body>
</html>

或多或少，我想知道如何收集选择颜色的顺序并将它们与预定模式进行比较。通过js或通过在网址中发布它会更好吗？无论哪种方式，有人可以证明它是如何完成的吗？

Answer 1

我只是将它们添加到单击处理程序内的数组中（使用jQuery，但如果你不喜欢jQuery，我可以不用重写它）：

var clickedColors = []
$('div').click(function() {
    clickedColors.push($(this).css('backgroundColor'));
});

然后对于比较部分我只使用JS逻辑。您可能想要查看Underscore.js库，因为它有很多用于处理数组的强大功能。

* *编辑* *

或者，如果您想要“尽可能少的Javascript”方法，您可以使用已有的onClick操作发送背景颜色。您可以通过更改：

来完成此操作

window.location='?name='+this.id

为：

window.location='?name='+this.id+'&color='+this.style.backgroundColor

这将在服务器端为您提供一个“颜色”参数，该参数应该具有被点击的div的背景颜色。

* *编辑＃2 * *

与OP聊天后，似乎最好的方法（鉴于他们缺乏Javascript知识）是尽可能少尝试Javascript。因此，我们决定：

将颜色放在div旁边的隐藏输入中
在隐藏的输入和div
更改onclick代码以提交表单

所以现在用户点击，div的表单被提交，div旁边的隐藏输入告诉服务器点击了什么颜色，并且OP可以随意使用服务器端/颜色中的颜色做任何他们想做的事情PHP。

Answer 2

我无法抗拒写作的潜在解决方案（http://jsfiddle.net/hHXV4/1/）的纯Javascript示例。如果你想跟随它，逻辑就在那里。

编辑：为简单起见进行了更新！

var e,body,colors,clickOrder,count;
clickOrder = [];
colors = [
    "#000000",
    "#FFFFFF",
    "#0000FF",
    "#008000",
    "#800080",
    "#FF0000",
    "#FFFF00",
    "#DD7500",
    "#4FD5D6",
    "#CD6090"
];
count = colors.length;
body = document.getElementsByTagName('body')[0];
for(var i=0; i<count; i++){
    e = document.createElement('div');
    e.style.backgroundColor = colors[i];
    e.indx = i;
    e.addEventListener("click",function(){
        clickOrder.push(colors[this.indx]);
        this.parentNode.removeChild(this);
        count--;
        if(count == 0){
            alert(clickOrder.join());
        }
    });
    body.appendChild(e);
}

使用Javascript跟踪每个div独有的功能

2 个答案: