Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > ขอถามเรื่องการใช้ function jquery รบกวนช่วยแนะนำหน่อยครับ

ขอถามเรื่องการใช้ function jquery รบกวนช่วยแนะนำหน่อยครับ

เริ่มหัวข้อใหม่

Emo

โพสกระทู้ ( 40 )
บทความ ( 0 )

Code (JavaScript)

<script>
$(document).ready(function(){
  $("div.main").on("click","div.countpage",function(){
	  $(this).find("div.report").toggle();
  });
});
</script>

Code (PHP)

<div class="main">
<? $i=1;
while($i<3){?>
<div class="countpage">
<? if($i==1){?>
<div class="page">หน้า <?=$i?></div>
<div class="report">
เนื้อหาหน้าที่<?=$i?>
</div>
</div>
<? }else{?>
<div class="page">หน้า <?=$i?></div>
<div class="report" style="display:none">
เนื้อหาหน้าที่<?=$i?>
</div>
</div>
<? }?>
<? $i++; }?>
</div>

คือผมต้องการที่จะกดที่ div page เพื่อซ่อนและแสดงหน้านั้นๆอะครับแต่มันทำไม่ได้ ก็เลยใช้กดที่ div countpage แทนแต่พอกดที่เนื้อหามันเลยซ่อนไปด้วย รบกวนช่วยแนะนำหน่อยครับ

Tag : PHP, jQuery

Date : 2014-08-13 07:41:14

By : _Emo_

View : 674

Reply : 3

No. 1

Chaidhanan

โพสกระทู้ ( 9,586 )
บทความ ( 2 )

ลองดูตัวอย่างนี้นะครับ
Code (PHP)

<!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>TEST</title>
<head>
<style>
body {
	margin: 0px;
	padding: 0px;
}
</style>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
	$('#slc').on("change",'','', function(e){
		//$.ajax({ url: '', type: GET, data: {action: getdata, value: 1}}).done(function(msg){ $('.report').html( msg ).slideToggle();});
		$('.data').html( 'New Message' ); $('.report').slideToggle();  // บันทัดนี้สำหรับเทสต์ ควรใช้ $.ajax บันทัดบน
	});
	$('#closePage').on('click', '', '', function(){ $('.report').slideToggle(); });
});
</script></head>
<body>
<div class="main">
	<div class="page"><select id="slc">
	<option value="">กรุณาเลือกหน้า</option>
	<option value="1">หน้า 1</option>
	</select>
	</div>
	<div class="report" style="display:none">
		<table><tr><td>
		<div class="data" >เนื้อหาหน้าที่ เปลี่ยนตาม select</div>
		<center><button type="button" id="closePage">X</button></center>
		</td></tr></table>
	</div>
</div>
</body>
</html>

Date : 2014-08-13 08:28:14

By : Chaidhanan

No. 2

phpinfo()

โพสกระทู้ ( 1,819 )
บทความ ( 20 )

Code

<div class="main">
<? $i=1;
while($i<3){?>
<div class="countpage">
<? if($i==1){?>
<div class="page">หน้า <?=$i?></div>
<div class="report">
เนื้อหาหน้าที่<?=$i?>
</div>
</div>
<? }else{?>
<div class="page">หน้า <?=$i?></div>
<div class="report" style="display:none">
เนื้อหาหน้าที่<?=$i?>
</div>
</div>
<? }?>
<? $i++; }?>
</div>

ลองสังเกตดูนะครับ <div class="page"> อยู่ก่อน <div class="report">
ดังนั้นถ้าอยากจะให้คลิก <div class="page"> แล้วซ่อน/แสดง <div class="report"> ต้องเลือกสิ่งที่อยู่ถัดไปครับ

Code

<script>
$(document).ready(function(){
    $("div.main").on("click","div.page",function(){
        // ในที่นี้ this จะเป็น <div class="page">
        // ดังนั้นให้หาสิ่งที่อยู่ถัดไปจาก this
	$(this).next().toggle();
    });
});
</script>

Date : 2014-08-13 10:34:19

By : phpinfo()

No. 3

Emo

โพสกระทู้ ( 40 )
บทความ ( 0 )

ขอบคุณมากๆครับ จะลองดูครับ

Date : 2014-08-13 20:28:25

By : _Emo_

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ขอถามเรื่องการใช้ function jquery รบกวนช่วยแนะนำหน่อยครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก