使用Javascript跟踪每个div唯一的函数

Question

所以这是我的目标，我需要能够确定用户单击的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中会更好吗？ 不管哪种方式，有人可以演示如何实现吗？

Answer 1

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

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

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

* *编辑* *

或者，如果您希望使用“尽可能少的Java脚本”方法，则可以通过已有的onClick操作发送背景色。 您可以通过以下方式进行更改：

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

至：

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

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

* *编辑＃2 * *

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

将颜色放在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 个解决方案

解决方案1
3 已采纳 2012-07-06 22:33:08

解决方案2
2 2012-07-06 22:39:10

使用Javascript跟踪每个div唯一的函数

问题描述

2 个解决方案

解决方案1 3 已采纳 2012-07-06 22:33:08

解决方案2 2 2012-07-06 22:39:10

解决方案1
3 已采纳 2012-07-06 22:33:08

解决方案2
2 2012-07-06 22:39:10