|
 |
| |
การดึงข้อมูลคำตอบที่ถูกจากดาต้าเบสแล้วมากำหนดกับ class ของ css ทำยังไงหรอคะ |
| |
 |
|
|
 |
 |
|
http://xx.xxx.xx.xxx/ratitest/lucky3.php นี่คือตัวอย่างเกมที่เราทำนะคะ
คือเกมนี้พอรีเฟรชใหม่แล้วค่าเดิมกลับมา คือเลขที่เคยกดเเล้วกลับมากดได้อีก ทำยังไงให้มันคงที่อยู่อย่างเดิมตามเลขที่เคยกดไว้หรอคะ
แล้วถ้าเรากำหนดคลาสของ css ไว้อ่ะค่ะ ว่า lucky คือ หมายเลขที่ตอบถูก, selected คือหมายเลขที่มีคนเลือกไปแล้ว, active คือหมายเลขที่ตนเองเลือก
คือหมายเลขที่ถูกเราจะดึงมาจาก backend ตามที่ admin กำหนดหมายเลขไว้อ่ะค่ะ ที่เก็บคือ คอลัมภ์ r_number ในฐานข้อมูลอ่ะค่ะ
เราจะกำหนดเงื่อนไขยังไงหรอคะ เมื่อถ้าผู้เล่นเลือกคำตอบถูก สีก็จะขึ้นตาม class lucky และ ถ้าเป็นหมายเลขที่ผู้เล่นเลือกสีก็จะขึ้นตาม class active คือเราจะดึงข้อมูลจากดาต้าเบสที่เป็นตัวกำหนดเลขที่ได้รางวัลยังไง เพื่อมากำหนดเงื่อนไขร่วมกันได้อ่ะคะ รบกวนด้วยนะคะ ขอบคุณมากค่ะ
นี่คือโค้ดนะคะ
โค้ดหน้าเกม
Code (PHP)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(e) {
$('li').click(function(e) {
var Current = $(this); //กำหนด Selector หลักเพื่อเรียนใช้งาน
var ID = Current.attr('id'); // Id ของ li ที่คลิก
var Text = Current.find('a').text(); //ให้หา tag <a></a> จาก Selector หลักแล้วเอา Text มา
if(Text!=""){ //ตรวจสอบว่าได้ Text มาหรือไม่ กรณีที่ li เป็น class="selected" มันจะไม่ได้ Text
$.ajax({ //เริ่มให้ ajax ทำงาน
url:"insert.php", // URL ของไฟล์ที่จะส่งไปประมวลผล
type:'POST', // ประเภทที่จะส่งไป GET หรือ POST
data:{insert:ID}, // ตัวแปร หรือ พารามิเตอร์ที่จะส่งไป {ชื่อตัวแปร:ค่าที่ส่ง} ชื่อตัวแปรจะต้องตรงกันในไฟล์ที่รับค่า
success: function(data){ // Call back เมื่อส่งค่าไปประมวลผลจะได้ค่าท่ส่งกลับมาอยู่ในตัวแปร data คือ 0 หรือ 1
if(data==0){ // กรณีที่เป็น 0 คือ Insert ผ่าน
Current.find('a').remove(); // ให้ลบ tag <a></a> ออกจาก Selector หลักที่ทำงานอยู่
//ก่อนลบ <li id="chd_6"><a href="javascript:;" class="lgv">6</a></li>
Current.addClass('selected').text(Text); // เพิ่ม class="selected" และกำหนด Text ใหม่
// หลังลบและกำหนดใหหม่ <li id="chd_6" class="selected">6</li>
//Current.addClass('lucky').text(Text);
//Current.addClass('active').text(Text);
}else{ // กรณีที่เป็น 1 คือ Insert ไม่ผ่าน
alert("ไม่สามารถบันทึกได้!");
}
}
});
}
});
});
</script>
<style type="text/css">
.box-g-lucky {
position: relative;
width: 600px ;
margin: 0 auto;
padding: 15px 13px 13px 15px;
}
.box-g-lucky ul {
position: relative;
z-index:
}
.box-g-lucky ul li, .h-status li span {
display: block;
float: left;
margin: 0 2px 2px 0;
width: 34px;
height: 34px;
text-align: center;
cursor: pointer;
background: #99cc66;
color: #000;
font: 700 15px/34px Arial;
/*text-shadow: 1px 1px 0 rgba(255,255,255,0.9);*/
border-radius: 2px;
/*box-shadow: 0 -25px 20px -15px rgba(0, 0, 0, 0.25) inset, 0 2px 3px rgba(255, 255, 255, 0.75) inset, 1px 0 2px rgba(0,0,0,0.5)*/
}
.box-g-lucky ul li.active,
.box-g-lucky ul li.selected,
.box-g-lucky ul li.lucky,
.box-g-lucky ul li:hover,
.h-status li span.selected,
.h-status li span.active,
.h-status li span.lucky {
/*box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.65) inset, -2px -2px 2px rgba(255, 255, 255, 0.95) inset, 1px 0 2px rgba(0,0,0,0.5)*/
}
.box-g-lucky ul li:hover {
background: #ff3399
}
.box-g-lucky ul li.active, .h-status li span.active {
background: #ffff99
}
.box-g-lucky ul li.selected, .h-status li span.selected {
background: #7a8e9c;
cursor: not-allowed
}
.box-g-lucky ul li.lucky, .h-status li span.lucky {
background: #ffa800
}
.box-g-lucky ul li a, .box-g-lucky ul li a:hover {
color: #000;
text-decoration: none
}
</style>
</head>
<body>
<div id="game-choice" class="box-g-lucky">
<ul id="game-play">
<?php
include "config.php";
$get_id = (isset($_GET['id'])) ? $_GET['id'] : '';
$string = "SELECT * FROM reward1 ORDER BY r_id DESC limit 1";
$query_string = mysql_query($string);
while($result = mysql_fetch_array($query_string))
{
for ($i=1; $i<=$result["number"]; $i++) //ตรง $ $result["number"] คือค่าของจำนวนตัวเลขในตารางที่ดึงมาจากดาต้าเบสในส่วนของ backend
{
echo '<li id='.$i.'><a href="javascript:;" class="select">'.$i.'</a></li>';
}
}
?>
</ul>
Tag : PHP, HTML/CSS, JavaScript, Ajax, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2013-07-24 10:36:15 |
By :
CDE |
View :
1164 |
Reply :
7 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ตัวเลขที่กดไปมันบันทึกลง DB ยังครับ
|
| |
|
|
| |
| Date :
2013-07-24 11:15:36 |
By :
Krungsri |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
บันทึกลงไปแล้วค่ะ
|
| |
|
|
| |
| Date :
2013-07-24 11:22:28 |
By :
CDE |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ของคุณ คุณ Krungsri มากๆเลยนะคะ ที่ทำโค้ดมาให้
|
| |
|
|
| |
| Date :
2013-07-24 11:24:05 |
By :
CDE |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
น่าจะประมาณนี้
Code (PHP)
<?
for ($i=1; $i<=$result["number"]; $i++) //ตรง $ $result["number"] คือค่าของจำนวนตัวเลขในตารางที่ดึงมาจากดาต้าเบสในส่วนของ backend
{
if("จำนวนรอบ"=="ค่าตัวเลขที่บันทึกใน DB"){
echo '<li id='.$i.' class="select">'.$i.'</li>';
}else{
echo '<li id='.$i.'><a href="javascript:;" class="select">'.$i.'</a></li>';
}
}
?>
หรือจะเอาค่าที่บันทึกลง DB อ่านออกมาใส่ array ไว้ แล้วใช้ in_array ตรวจสอบเอาก็ได้อีกนึงวิธี
|
ประวัติการแก้ไข
2013-07-24 11:31:16
| |
|
|
| |
| Date :
2013-07-24 11:28:23 |
By :
Krungsri |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
จำนวนรอบนี่คือ ค่าตัวเลขที่ได้รางวัลที่ดึงมาจากดาต้าเบสใช่มั้ยคะ
|
| |
|
|
| |
| Date :
2013-07-24 11:38:08 |
By :
CDE |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
จำนวนรอบคือ $i ครับ
|
| |
|
|
| |
| Date :
2013-07-24 11:40:48 |
By :
Krungsri |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
มันไม่เปลี่ยนสีตาม class lucky อ่ะค่ะ ยังเป็นสีของ class select อยู่
|
| |
|
|
| |
| Date :
2013-07-24 14:25:46 |
By :
CDE |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
