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 が気に入らない場合は、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

私が書くことに抵抗できなかった潜在的な解決策の純粋なJavascriptの例（http://jsfiddle.net/hHXV4/1/ ）。あなたがそれに従いたいのであれば、ロジックはすべてそこにあります。

編集：簡単にするために更新されました！

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 に答える