0

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

<?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还是通过在url中发布会更好吗？无论哪种方式，有人可以证明它是如何完成的吗？

4

2 回答 2

3

我只需将它们添加到单击处理程序内的数组中（使用 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。因此，我们决定：

  1. 将颜色放在 div 旁边的隐藏输入中
  2. 在隐藏的输入和 div 周围放置一个表单
  3. 更改 onclick 代码以提交表单

因此，现在用户单击，该 div 的表单被提交，div 旁边的隐藏输入告诉服务器单击了哪种颜色，并且 OP 可以自由地使用服务器端/PHP 中的颜色做任何他们想做的事情。

于 2012-07-06T22:33:08.273 回答
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);
}​
于 2012-07-06T22:39:10.593 回答