ช่วยเเนะนำการเขียน jquery เเทรกข้อมูลในpopupรูปภาพ ให้หน่อยครับ มือใหม่ครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ช่วยเเนะนำการเขียน jquery เเทรกข้อมูลในpopupรูปภาพ ให้หน่อยครับ มือใหม่ครับ

ช่วยเเนะนำการเขียน jquery เเทรกข้อมูลในpopupรูปภาพ ให้หน่อยครับ มือใหม่ครับ

ผมกำลังทำตัว popup ของรูปภาพขึ้นมาครับ เเละต้องการที่จะใส่ตัว ปุ่ม download เข้าไปอยูใน popup ของรูปภาพ โดยต้องการจะเเทรกปุ่มไว้ข้างๆ ตัว 3 of 6 ตามรูป ด้วยวิธีเขียน jquery เเทรกเข้าไป เเต่ผมไม่ทราบว่าจะต้องการอ้างอิงอย่างไร เพื่อทำให้มีการเเทรกตัวปุ่ม download เข้าไปในตัว popup รบกวนด้วยครับ

code ส่วนปุ่ม download

<style>.download-btn{ margin-top: 10px; padding: 5px; background: #fff; float: right; font-size:12px; }.truhits-btn{   }</style>

code ส่วน popup

if ($number) {
echo '<p><hr><h3>ภาพที่เกี่ยวข้อง</h3>';
echo '	<div class="col-xs-12 col-md-12 p-0 m-0"> 
    <div class="single-post-box wide-version">
        <div class="article-inpost">';
            while ($r = mysql_fetch_array($re)) {
            echo'
            <div class="col-xs-6 col-md-3">

                <div class="image-content">
                    <div class="image-place">
                        <img src="' . imgsrc($r['pic']) . '" alt="" style="margin:3px ;max-height:78px;">
                        <div class="hover-image">
                            <a class="zoom" href="' . imgsrc($r['pic'], 1240) . '" ><i class="fa fa-arrows-alt" style="margin-top:5px"></i></a>
                        </div>
                        <div class="clearfix" ></div> 
                    </div>
                </div>

            </div>';
            }
            echo '</div>
    </div>
</div>

</p>';
}

Antinew007 23-02-2020 14:40:12

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

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

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ดูว่าตัว plugin ที่เราใช้อยู่ สามารถกำหนดอะไรได้บ้าง เช่น รองรับการกำหนด
การแทรกโค้ดเข้าไปในส่วนของการแสดงหรือไม่ แต่ถ้าไม่มี ให้ใช้วิธี inspect
ดูตำแหน่ง ที่จะแทรก ดูว่าส่วนนั้น มี element อะไร ใช้ชื้อ class อะไร ที่พอจะอ้างอิง
โดยใช้ jquery selector ต้องมีความเข้าใจเกี่ยวกับ dom

>>> อัพเดท >>> 23-02-2020
------------------------------------------

ตัวอย่างโครงสร้าง HTML DOM เช่น

<div class="my-css-1">
    <div class="my-css-2"></div>
    <div class="my-css-3">
        <div></div>
        <span>1</span>
        <span>of</span>
        <span>10</span>
    </div>
</div>

ผลลัพธ์

เราต้องการเป็น

<div class="my-css-1">
    <div class="my-css-2"></div>
    <div class="my-css-3">
        <div></div>
        <a href="#" class="my-css-a-1">Download</a>
        <span>1</span>
        <span>of</span>
        <span>10</span>
    </div>
</div>

ผลลัพธ์

สิ่งที่ต้องทำ เราต้องการแทรกโค้ดเข้าไปที่ตำแหน่งดังรูป โดยเลือกวิธีที่สามารถจัดการได้ ดังนี้

- ไว้ก่อน span ตัวแรกที่อยู่ใน div.my-css-3

- ไว้หลัง div ตัวแรกที่อยู่ใน div.my-css-3

- อื่นๆ ตามการอ้างอิงที่เหมาะสม

ตัวอย่างโค้ดการใช้งาน jQuery

<div class="my-css-1">
    <div class="my-css-2"></div>
    <div class="my-css-3">
        <div></div>
        <span>1</span>
        <span>of</span>
        <span>10</span>
    </div>
</div>  
<button type="button" id="my-method1">Method 1</button>
<button type="button" id="my-method2">Method 2</button>
<button type="button" id="my-reset">Reset</button>

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" >
$(function () {
    // - ไว้ก่อน span ตัวแรกที่อยู่ใน div.my-css-3
    $("#my-method1").click(function(){
        var objA = $("<a>",{
            "class":"my-css-a-1",
             "href":"#",
             "text":"Download"
         }); 
         $("div.my-css-3 span:eq(0)").before(objA);
    });
    // ไว้หลัง div ตัวแรกที่อยู่ใน div.my-css-3
    $("#my-method2").click(function(){
        var objA = $("<a>",{
            "class":"my-css-a-1",
             "href":"#",
             "text":"Download"
         }); 
         $("div.my-css-3 div:eq(0)").after(objA);
    });
    $("#my-reset").click(function(){
        $("a.my-css-a-1").remove();
    });        
  
});
 </script>

ตัวอย่าง DEMO

ninenik 23-02-2020

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน