Forgot Password ??

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

	Registered : 109,027

HOME > PHP > PHP Forum > ช่วยดูให้หน่อยครับ ผมติดปัญหาเรื่อง Jquery ครับ คือว่าผมมี Code อยู่ชุดนึงแล้วรันไม่ผ่านครับ

ช่วยดูให้หน่อยครับ ผมติดปัญหาเรื่อง Jquery ครับ คือว่าผมมี Code อยู่ชุดนึงแล้วรันไม่ผ่านครับ

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

Falcon

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

ผมลองรันแล้วครับ พบว่า สามารถกด Add to cart ได้ครับ แต่ไม่สามารถลบข้อมูลออกจาก cart ได้ครับ

รบกวนช่วยดูให้หน่อยนะครับ

ขอบคุณครับ

Code ครับ

Code (PHP)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>

 </head>

 <body>
  <table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" valign="top"><div class="wapProductBox">
        <table width="150" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="50" align="center" bgcolor="#CCCC66">&nbsp;</td>
          </tr>
        </table>
        <input type="button" name="button" id="button"  class="toCart"value="Add to Cart" />
      </div>
      <div class="wapProductBox">
        <table width="150" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="50" align="center" bgcolor="#FF9999">&nbsp;</td>
          </tr>
        </table>
        <input type="button" name="button" id="button"  class="toCart"value="Add to Cart" />
      </div>
      <div class="wapProductBox">
        <table width="150" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="50" align="center" bgcolor="#00CCFF">&nbsp;</td>
          </tr>
          </tr>
        </table>
        <input type="button" name="button" id="button"  class="toCart"value="Add to Cart" />
      </div>
      <div class="wapProductBox">
        <table width="150" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="50" align="center" bgcolor="#FFCC66">&nbsp;</td>
          </tr>
          </tr>
        </table>
        <input type="button" name="button" id="button"  class="toCart"value="Add to Cart" />
      </div>
  </td>
    <td width="200" align="left" valign="top" bgcolor="#F2F2F2">
    <form id="form_checkout" name="form_checkout" method="post" action="">
        <div id="boxOfProduct">
        </div>
      </form>
      </td>
  </tr>
</table>
 </body>



<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	$("input.toCart").click(function(){
		var nowOffsetX=$(this).parents("div.wapProductBox").offset().left; // หาตำแหน่งสินค้า แกน x
		var nowOffsetY=$(this).parents("div.wapProductBox").offset().top; // หาตำแหน่งสินค้า แกน y
		var moveOffsetX=$("div#boxOfProduct").offset().left; // หาตำแหน่งตะกร้าสินค้า แกน x
		var moveOffsetY=$("div#boxOfProduct").offset().top; // หาตำแหน่งตะกร้าสินค้า แกน y
		var nowObjPhoduct=$(this).parents("div.wapProductBox").clone(); // สร้าง object สินค้าใหม่ โดย copy จากตัวเดิม

		$(nowObjPhoduct).find("input.toCart").remove(); // เอาปุ่มเพิ่มรายการออก

		// จัดตำแปน่งไว้ที่เดิม แต่ซ้อนอยู่ด้านบน
		nowObjPhoduct.css({
			position:"absolute",
			left:nowOffsetX+"px",
			top:nowOffsetY+"px",
			"z-index":"900"
		});
		$(document.body).prepend(nowObjPhoduct); // แทรกลงไปในเว็บ
		// ย้ายตำแหน่ง ไปยังตะกร้าสินค้า
		nowObjPhoduct.animate({
			left:moveOffsetX+"px",
			top:moveOffsetY+"px",
			opacity:0
		},500,function(){
			// ฟังก์ชันเมื่อย้ายตำแหน่ง เสร็จต้องการให้ทำอะไร
			// สามารถนำไปประยุกต์ เพิ่มสินค้าในตะกร้าสินค้า ด้วย ajax
			var obj_remove="<button type=button class=removeCart>Remove</button>"; // เพิ่มปุ่มลบรายการ
			$("div#boxOfProduct").prepend('<div class="wapProductBox">'+nowObjPhoduct.html()+obj_remove+'</div>');
		});		
		return false;
	});

	$("button.removeCart").live("click",function(){ // เมื่อคลิกที่ปุ่มลบรายการ
			$(this).parents("div.wapProductBox").fadeOut(); // ลบรายการที่เลือก
	});

});

</script>


</html>

Tag : PHP, jQuery

Date : 2013-06-18 23:58:53

By : zimmpooh

View : 848

Reply : 2

No. 1

Guest

วิธีแก้นั้นง่ายมากๆๆ เนื่องจากต้องใช้ jquery-1.7.1.min.js ที่สนับสนุน live click function
ans by.....ctrls

Date : 2013-06-19 10:45:12

By : เบทเทอ

No. 2

Falcon

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

งะ ขอบคุณมากครับ ไม่รู้มาก่อนเลยครับ T T

ตายน้ำตื้นชัดๆ ^__^

Date : 2013-06-19 10:54:19

By : zimmpooh

ค้นหาข้อมูล

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

Re : ช่วยดูให้หน่อยครับ ผมติดปัญหาเรื่อง Jquery ครับ คือว่าผมมี Code อยู่ชุดนึงแล้วรันไม่ผ่านครับ

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 04