ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้
ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้


อยากสอบถามเกี่ยวกับ More ค่ะ

ถาม-ตอบ แนะนำไอเดีย โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากสอบถามเกี่ยวกับ More ค่ะ

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

อยากสอบถามเกี่ยวกับ More ค่ะ
พี่นิคค่ะ พอจะแนะนำให้ได้บ้างไหมค่ะ ว่า อยากให้กดปุ่ม more แล้วโชว์ข้อมูลขึ้นมา พร้อมกับคำว่า more แล้วเมื่อกด more อีกก้๗ะโชว์ข้อมูลอีกจนกว่าจะหมด พอหมดแล้วถึงจะโชว์คำว่า More less อ่ะค่ะ พอมีคำแนะนำบ้างไหมค่ะ

โค้ดออันนี้เป็น หน้าตา UI ของ More ค่ะ
<div class="far-content-profile">
    <div class="row">
        <div class="panel panel-primary widget">
            <div class="panel-heading">
                <h3 class="panel-title">Follow</h3>
                <span class="label label-info">78</span>
            </div>
            <div class="panel-body">
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="row">
                        	<div class="col-xs-4 col-sm-4">
                            	<img src="http://placehold.it/80" class="img-circle img-responsive" alt="" />
                            </div>
                            <div class="col-xs-8 col-sm-8">
                            	<div class="text-menu-tab">
                                	<a href="#">Sealinkk Sealinkk</a>
                                    	<div class="mic-info">
                                        	<p>Rank : Master</p>
                                    	</div>
                                </div>
                                <div class="action">
                                	<button type="button" class="btn btn-addfriend btn-xs">
                                   		<span class="fa fa-user-plus"></span>
                                        <span>Add Friend</span>
                                    </button>
                                    <button type="button" class="btn btn-follow btn-xs">
                                    	<span class="fa fa-plus"></span>
                                        <span>Follow</span>
                                    </button>
                                    <div class="far-btn-meassge">
                                    	<button type="button" class="btn btn-meassge btn-xs">
                                        	<span class="fa fa-comments-o"></span>
                                        	<span>Meassge</span>
                                    	</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                    	<div class="row">
                        	<div class="col-xs-4 col-sm-4">
                            	<img src="http://placehold.it/80" class="img-circle img-responsive" alt="" />
                            </div>
                            <div class="col-xs-8 col-sm-8">
                            	<div class="text-menu-tab">
                                	<a href="#">Sealinkk Sealinkk</a>
                                    <div class="mic-info">
                                        <p>Rank : Master</p>
                                    </div>
                                </div>
                                <div class="action">
                                    <button type="button" class="btn btn-addfriend btn-xs">
                                        <span class="fa fa-user-plus"></span>
                                        <span>Add Friend</span>
                                    </button>
                                    <button type="button" class="btn btn-follow btn-xs">
                                        <span class="fa fa-plus"></span>
                                        <span>Follow</span>
                                    </button>
                                    <div class="far-btn-meassge">
                                    <button type="button" class="btn btn-meassge btn-xs">
                                        <span class="fa fa-comments-o"></span>
                                        <span>Meassge</span>
                                    </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="row">
                            <div class="col-xs-4 col-sm-4">
                                <img src="http://placehold.it/80" class="img-circle img-responsive" alt="" />
                            </div>
                            <div class="col-xs-8 col-sm-8">
                                <div class="text-menu-tab">
                                    <a href="#">Sealinkk Sealinkk</a>
                                    <div class="mic-info">
                                        <p>Rank : Master</p>
                                    </div>
                                </div>
                                <div class="action">
                                    <button type="button" class="btn btn-addfriend btn-xs">
                                        <span class="fa fa-user-plus"></span>
                                        <span>Add Friend</span>
                                    </button>
                                    <button type="button" class="btn btn-follow btn-xs">
                                        <span class="fa fa-plus"></span>
                                        <span>Follow</span>
                                    </button>
                                    <div class="far-btn-meassge">
                                    <button type="button" class="btn btn-meassge btn-xs">
                                        <span class="fa fa-comments-o"></span>
                                        <span>Meassge</span>
                                    </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <a href="#" class="btn btn-primary btn-sm btn-block showall"><span class="glyphicon glyphicon-refresh"></span> More</a>
            </div>
        </div>
    </div>
</div>
 
ปล. อยากให้โชว์เป็นบล๊อกๆเฉพาะข้างในอ่ะค่ะ 


Chickenkook 25-10-2016 15:49:00

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • CAPTCHA Image
    Play CAPTCHA Audio
    Refresh Image


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ลองโค้ดประมาณนี้เป็นแนวทาง

<div class="far-content-profile">
    <div class="row">
        <div class="panel panel-primary widget">
            <div class="panel-heading">
                <h3 class="panel-title">Follow</h3>
                <span class="label label-info">78</span>
            </div>
            <div class="panel-body">
                <ul class="list-group">
                
   					<?php for($i=1;$i<=20;$i++){?>
                    <li class="list-group-item <?=($i>5)?"hidden":""?>">
                    	<div class="row">
                        	<div class="col-xs-4 col-sm-4">
                            	<img src="http://placehold.it/80" class="img-circle img-responsive" alt="" />
                            </div>
                            <div class="col-xs-8 col-sm-8">
                            	<div class="text-menu-tab">
                                	<a href="#">Sealinkk Sealinkk</a>
                                    <div class="mic-info">
                                        <p>Rank : Master</p>
                                    </div>
                                </div>
                                <div class="action">
                                    <button type="button" class="btn btn-addfriend btn-xs">
                                        <span class="fa fa-user-plus"></span>
                                        <span>Add Friend</span>
                                    </button>
                                    <button type="button" class="btn btn-follow btn-xs">
                                        <span class="fa fa-plus"></span>
                                        <span>Follow</span>
                                    </button>
                                    <div class="far-btn-meassge">
                                    <button type="button" class="btn btn-meassge btn-xs">
                                        <span class="fa fa-comments-o"></span>
                                        <span>Meassge</span>
                                    </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
				<?php } ?>
                
                </ul>
                <a href="javascript:load_more();" class="btn btn-primary btn-sm btn-block showall"><span class="glyphicon glyphicon-refresh"></span> More</a>
            </div>
        </div>
    </div>
</div>
</div>        
    
<script type="text/javascript">
var load_more = function(){
	var hidden_list = $(".list-group-item:hidden").length;
	if(hidden_list>5){
		$(".list-group-item:hidden:lt(5)").removeClass("hidden");
	}else{
		$(".refresh").remove();
		$(".showall").text("More less");
	}

}
</script>


ninenik 25-10-2016
 ความคิดเห็นที่ 2
พี่นิคค่ะ หนูรบกวนอีกรอบค่ะ คือหนูทำแล้วดัดแปลงแล้ว มันก็ยังไม่ยอมขึ้น More less ให้อ่ะค่ะ หนูเอา  .refresh ใส่ไปเพิ่มตรง .list-group-item ตามที่เข้าใจในการอ่านโค้ดอ่ะค่ะพี่ แต่มันก็ยังไม่มาและโชว์อ่ะค่ะพี่ รบกวนด้วยนะค่ะ 




chickenkook 26-10-2016 17:19
 ความคิดเห็นที่ 3
ตัวอย่างโค้ดเป็นแค่แนวทาง
ใช้วิธีดึงรายการมาทั้งหมด ในครั้งเดียว แล้วแสดงเฉพาะ 5 รายการแรก
รายการที่เหลือใช้วิธี ซ่อนเอาไว้ ใน bootstrap มี css class ที่ชื่อ hidden
พอกำหนดเข้าไปทำให้รายการนั้นถูกซ่อน
 
โค้ดตัวอย่างใช้วิธีกำหนดลูป for แล้วใช้ตัวแปร $i นับว่าเป็นตัวที่เท่าไหร่
ถ้าใช้ while ก็อาจจะต้องกำหนดตัวแปร ก่อน while

<ul>
<?php
$i=0;
while(.....)
	$i++;
?>
<li class="<?=($i>5)?"hidden":""?>"></li>
<?php } ?>
</ul>


โค้ดคือตั้งแต่ $i ที่มากกว่า 5 ให้ซ่อนไว้ก่อน
 
ส่วนวิธีการแสดงก็เป็นการเรียกใข้ฟังก์่นอย่างง่าย
คำอธิบายในโค้ด

<script type="text/javascript">
// เมื่อเรียกใชืฟังก์ชั่น
var load_more = function(){
	// สร้างตัวแปร รับค่า ว่า list ที่มี css class ชื่อ list-group-item ที่ถูกซ่อนอยู่มีกี่่รายการ
	// สมมติทั้งหมดมี 20 แสดง 5 ตอนเริ่มต้น ซ่อนอยู่ก็คือ 15
	var hidden_list = $(".list-group-item:hidden").length;
//	console.log(hidden_list); // ไว้ debug หรือ เช็คจำนวน
	if(hidden_list>5){ // เมื่อเราแสดงครั้งละ 5 ถ้าซ่อนอยู่มากกว่า 5
		// ให้ list ที่มี css class ชื่อ list-group-item ที่ถูกซ่อนอยู่ ตั้งแต่ตัวแรกถึงตัวที่ 5 แสดง 
		// โดยเอา class hidden ออก
		$(".list-group-item:hidden:lt(5)").removeClass("hidden");
	}else{ // สมมติแสดงมาทั้งหมด ถึง 15 ตัวแล้ว ก็จะเหลืออีก <=5
		// แสดงรายการที่เหลือทั้งหมด
		$(".list-group-item:hidden:lt(5)").removeClass("hidden");		
		$(".showall").text("More less"); // ให้ข้อความในแท็ก a ที่มี class ชื่อ showall เปลี่ยนเป็น More less
	}

}
</script>


ตัวอย่าง

Follow

78
More


 


ninenik 26-10-2016
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2026 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ