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

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

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

code ส่วนปุ่ม download
1
<style>.download-btn{ margin-top: 10px; padding: 5px; background: #fff; float: right; font-size:12px; }.truhits-btn{   }</style>

code ส่วน popup
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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

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

>>>  อัพเดท >>> 23-02-2020
------------------------------------------
ตัวอย่างโครงสร้าง HTML DOM เช่น
 
1
2
3
4
5
6
7
8
9
<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>
 
ผลลัพธ์
 
 
เราต้องการเป็น
 
1
2
3
4
5
6
7
8
9
10
<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
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ