คือเราทำตารางเกม ตามในภาพ สีฟ้าคือช่องที่มีคนเลือกแล้ว จะเป็น class selected
ส่วนตัวเลขที่ได้รางวัลจะเป็นอีกสีนึงตาม class lucky ส่วนเลขที่ตนเองเลือกจะเป็น class meselect
ที่มีปัญหาคือ เลขที่เรากำหนดให้เป็นเลขที่ถูกรางวัลกลับขึ้นเป็นสีตาม class selected
พอเรา addclass เพิ่ม สีก็จะขึ้นตามคลาสที่เราเพิ่มล่าสุดอ่ะค่ะ เราไม่รู้วิธีที่จะใส่เงื่อนไขอ่ะค่ะ
มีวิธี addclass ที่มากกว่า 1 คลาสยังไงหรอคะ รบกวนด้วยนะคะ
อันนี้คือโค้ดนะคะ
<!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="select" มันจะไม่ได้ 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="">6</a></li>
Current.addClass('selected').text(Text); // เพิ่ม class="selected" และกำหนด Text ใหม่
// หลังลบและกำหนดใหหม่ <li id="chd_6" class="selected">6</li>
Current.addClass('lucky').text(Text); // นี่เป็นคลาสที่เรา add เพิ่ม สีก็จะขึ้นตามคลาสนี้หมดทุกช่องที่กดเลือก
}else{ // กรณีที่เป็น 1 คือ Insert ไม่ผ่าน
alert("ไม่สามารถบันทึกได้!");
}
}
});
}
});
});
</script>
<style type="text/css">
}
</style>
</head>
<body>
ส่วนนี้เป็นการกำหนดจำนวนช่องตารางและเงื่อนไขถ้าเลือกได้ตัวเลขที่ได้รางวัล แล้วเราจะกำหนดเงื่อนไขยังไงหรอคะถ้าเป็นช่องที่ตัวเราเองเป็นคนเลือก
<?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++) // number จำนวนช่องที่กำหนดจาก backend ซึ่งดึงมาจากฐานข้อมูล
{
if($i==$result["r_number"]){ //r_number คือตัวเลขที่ถูกรางวัล ซึ่งดึงมาจากฐานข้อมูล
echo '<li id='.$i.'><a href="javascript:;" class="lucky">'.$i.'</a></li>';
}else{
echo '<li id='.$i.'><a href="javascript:;" class="">'.$i.'</a></li>';
}
}
}
?>
</ul>
การกำหนด class ของ css ใน ajax ที่มากกว่า 1 คลาส ทำยังไงหรอคะ
ส่วนตัวเลขที่ได้รางวัลจะเป็นอีกสีนึงตาม class lucky ส่วนเลขที่ตนเองเลือกจะเป็น class meselect
ที่มีปัญหาคือ เลขที่เรากำหนดให้เป็นเลขที่ถูกรางวัลกลับขึ้นเป็นสีตาม class selected
พอเรา addclass เพิ่ม สีก็จะขึ้นตามคลาสที่เราเพิ่มล่าสุดอ่ะค่ะ เราไม่รู้วิธีที่จะใส่เงื่อนไขอ่ะค่ะ
มีวิธี addclass ที่มากกว่า 1 คลาสยังไงหรอคะ รบกวนด้วยนะคะ
อันนี้คือโค้ดนะคะ
<!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="select" มันจะไม่ได้ 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="">6</a></li>
Current.addClass('selected').text(Text); // เพิ่ม class="selected" และกำหนด Text ใหม่
// หลังลบและกำหนดใหหม่ <li id="chd_6" class="selected">6</li>
Current.addClass('lucky').text(Text); // นี่เป็นคลาสที่เรา add เพิ่ม สีก็จะขึ้นตามคลาสนี้หมดทุกช่องที่กดเลือก
}else{ // กรณีที่เป็น 1 คือ Insert ไม่ผ่าน
alert("ไม่สามารถบันทึกได้!");
}
}
});
}
});
});
</script>
<style type="text/css">
}
</style>
</head>
<body>
ส่วนนี้เป็นการกำหนดจำนวนช่องตารางและเงื่อนไขถ้าเลือกได้ตัวเลขที่ได้รางวัล แล้วเราจะกำหนดเงื่อนไขยังไงหรอคะถ้าเป็นช่องที่ตัวเราเองเป็นคนเลือก
<?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++) // number จำนวนช่องที่กำหนดจาก backend ซึ่งดึงมาจากฐานข้อมูล
{
if($i==$result["r_number"]){ //r_number คือตัวเลขที่ถูกรางวัล ซึ่งดึงมาจากฐานข้อมูล
echo '<li id='.$i.'><a href="javascript:;" class="lucky">'.$i.'</a></li>';
}else{
echo '<li id='.$i.'><a href="javascript:;" class="">'.$i.'</a></li>';
}
}
}
?>
</ul>