การเปลี่ยนแหล่งรูปภาพโดยใช้ jQuery

764

DOM ของฉันมีลักษณะเช่นนี้:

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

เมื่อมีคนคลิกที่ภาพฉันต้องการภาพ src เพื่อเปลี่ยนเป็น<img src="imgx_off.gif">ที่xแสดงถึงจำนวนภาพ 1 หรือ 2

เป็นไปได้หรือฉันต้องใช้ CSS เพื่อเปลี่ยนภาพ?

javascript jquery image

— user67033
แหล่งที่มา

หากคุณต้องการบางสิ่งบางอย่างโดยใช้ jQuery คุณอาจต้องการดูปลั๊กอิน jQuery Cycle, scrollRight สาธิต (ตัวอย่างด้านล่างขวา)

— TomHastjarjanto

43

jQuery ("# my_image"). attr ("src", "first.jpg")

— manaut nautiyal

9

คุณควรยอมรับคำตอบของ jonstjohn :) จำนวน upvotes ทั้งคำถามและคำตอบบ่งชี้ว่ามีผู้คนมากมายที่เข้ามาเกี่ยวข้อง มันจะปรับปรุงคำถามให้มีคำตอบที่ยอมรับได้

— Xcelled

4

จนกระทั่งวันคือ19th July, 2016 15:39 PMคำถาม upvotes นับ369และคำตอบ @jonstjohn upvotes นับ931 แต่ดังกล่าวไม่ดีโชค @OP Feb 17 '09 at 2:57ไม่ได้เข้าสู่ระบบหลังจาก :(และคำตอบ @jonstjohn คงไม่มีเครื่องหมาย

— Nana Partykar

@ Xcelled ปัญหาเดียวคือคำตอบของ jonstjohn ไม่ตอบคำถาม มันเป็นประเด็นย่อย แต่สิ่งหนึ่งที่ควรค่าแก่การทำ ลองดูที่คำตอบของ inco เพราะเป็นคำตอบเดียวที่นี่จริง ๆ ตอบคำถามได้อย่างถูกต้อง

— David Newcomb

1687

คุณสามารถใช้ฟังก์ชันattr ()ของ jQuery ตัวอย่างเช่นหากimgแท็กของคุณมีidแอตทริบิวต์ 'my_image' คุณจะทำดังนี้:

<img id="my_image" src="first.jpg"/>

จากนั้นคุณสามารถเปลี่ยนsrcภาพของคุณด้วย jQuery เช่นนี้:

$("#my_image").attr("src","second.jpg");

หากต้องการแนบสิ่งนี้เข้ากับclickกิจกรรมคุณสามารถเขียน:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

ในการหมุนภาพคุณสามารถทำได้:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

— jonstjohn
แหล่งที่มา

79

หนึ่งในข้อผิดพลาดทั่วไปที่ผู้คนทำเมื่อเปลี่ยนแหล่งที่มาของรูปภาพไม่รอให้โหลดรูปภาพทำหลังจากนั้นเช่นขนาดภาพที่ครบกำหนด ฯลฯ คุณจะต้องใช้.load()วิธีjQuery เพื่อทำสิ่งต่าง ๆ หลังจากโหลดรูปภาพ

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

เหตุผลในการแก้ไข: https://stackoverflow.com/a/670433/561545

— Mohsen
แหล่งที่มา

ใช่. ในที่สุดก็ทำอุบาย .destroy () ไม่ไปไกลพอ Nuking html ทั้งหมดและกว่า init อีกครั้งใช้งานได้จริงเมื่อทำการสลับรูปภาพขนาดต่าง ๆ และเช่นนั้น

— Matt J.

โปรดทราบว่าการโหลดจะไม่ทำงานอย่างน่าเชื่อถือโดยเฉพาะถ้าภาพอยู่ในแคช ดูเอกสารประกอบ jQuery

— Twilite

19

สำหรับข้อมูลเพิ่มเติม. ฉันลองตั้งค่าคุณลักษณะ src ด้วยวิธี attr ใน jquery สำหรับรูปภาพโฆษณาโดยใช้ไวยากรณ์ตัวอย่างเช่น:$("#myid").attr('src', '/images/sample.gif');

โซลูชันนี้มีประโยชน์และใช้งานได้ แต่หากเปลี่ยนการเปลี่ยนเส้นทางจะเป็นเส้นทางสำหรับรูปภาพด้วยและไม่ทำงาน

ฉันค้นหาวิธีแก้ไขปัญหานี้แล้ว แต่ไม่พบอะไรเลย

ทางออกคือการใส่ '\' ที่จุดเริ่มต้นของเส้นทาง: $("#myid").attr('src', '\images/sample.gif');

เคล็ดลับนี้มีประโยชน์มากสำหรับฉันและฉันหวังว่าจะเป็นประโยชน์สำหรับผู้อื่น

— wphonestudio
แหล่งที่มา

18

หากไม่มี jQuery หรือเฟรมเวิร์กการฆ่าทรัพยากรอื่น ๆ - kb จำนวนมากให้ดาวน์โหลดในแต่ละครั้งโดยผู้ใช้แต่ละคนเพื่อให้ได้เคล็ดลับง่ายๆ - แต่ยังใช้ JavaScript ดั้งเดิม (!):

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

นี้สามารถเขียนทั่วไปและสง่างามมากขึ้น:

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

— Inco
แหล่งที่มา

มันทำให้ฉันประหลาดใจเสมอว่ามีคนกี่คนที่ไม่สามารถอ่านคำถามและตอบคำถามได้ ดูเหมือนว่าฉัน (และคุณ) เห็นได้ชัดว่าคำถามนั้นกำลังมองหาวิธีการแก้ปัญหาทั่วไปซึ่งเป็นสาเหตุที่ OP ให้ 2 ตัวอย่าง และทุกคนก็ดูเหมือนจะไม่เพียง แต่คิดถึงมันทั้งหมด แต่ให้คำตอบที่ไม่แม้แต่จะตอบคำถาม :(

— David Newcomb

17

ฉันจะแสดงวิธีการเปลี่ยนภาพsrcเพื่อที่ว่าเมื่อคุณคลิกที่ภาพมันจะหมุนภาพทั้งหมดที่อยู่ใน HTML ของคุณ (ในd1id และc1คลาสของคุณโดยเฉพาะ) ... ไม่ว่าคุณจะมี 2 หรือมากกว่าภาพใน HTML ของคุณ .

ฉันจะแสดงวิธีล้างหน้าหลังจากเอกสารพร้อมเพื่อให้แสดงเพียงภาพเดียวในตอนแรก

รหัสเต็ม

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

การพังทลาย

สร้างสำเนาของลิงค์ที่มีภาพ (หมายเหตุ: คุณสามารถใช้คุณสมบัติ href ของลิงค์สำหรับฟังก์ชั่นเพิ่มเติม ... เช่นแสดงลิงค์ทำงานด้านล่างแต่ละภาพ ):
```
    var $images = $("#d1 > .c1 > a").clone();  ;
```
ตรวจสอบว่ามีภาพจำนวนเท่าใดใน HTML และสร้างตัวแปรเพื่อติดตามภาพที่จะแสดง:
```
var $length = $images.length;
var $imgShow = 0;
```
แก้ไข HTML ของเอกสารเพื่อให้แสดงเฉพาะภาพแรกเท่านั้น ลบภาพอื่น ๆ ทั้งหมด
```
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
```
ผูกฟังก์ชั่นที่จะจัดการเมื่อมีการคลิกลิงค์รูปภาพ
```
    $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });
```
หัวใจของรหัสข้างต้นใช้++$imgShow % $lengthในการวนรอบวัตถุ jQuery ที่มีรูปภาพ ++$imgShow % $lengthก่อนเพิ่มตัวนับของเราทีละตัวจากนั้นจะปรับจำนวนนั้นด้วยจำนวนรูปภาพที่มี สิ่งนี้จะทำให้ดัชนีผลลัพธ์หมุนเวียนจาก0ถึงlength-1ซึ่งเป็นดัชนีของ$imagesวัตถุ ซึ่งหมายความว่ารหัสนี้จะทำงานกับ 2, 3, 5, 10 หรือ 100 ภาพ ... การหมุนเวียนในแต่ละภาพในการสั่งซื้อและเริ่มใหม่ในภาพแรกเมื่อถึงภาพสุดท้าย

นอกจากนี้.attr()ยังใช้เพื่อรับและตั้งค่าแอตทริบิวต์ "src" ของรูปภาพ ที่จะเลือกองค์ประกอบจากบรรดา$imagesวัตถุผมตั้ง$imagesเป็นบริบท jQuery$(selector, context)โดยใช้แบบฟอร์ม จากนั้นฉันก็.eq()เลือกองค์ประกอบที่มีดัชนีเฉพาะที่ฉันสนใจ

ตัวอย่าง jsFiddle ที่มี 3 รูป

คุณยังสามารถจัดเก็บsrcs ในอาร์เรย์
ตัวอย่าง jsFiddle ที่มี 3 รูป

และนี่คือวิธีรวม hrefs จากแท็ก anchor รอบภาพ:
ตัวอย่าง jsFiddle

— ปีเตอร์ Ajtai
แหล่งที่มา

17

หวังว่ามันจะทำงานได้

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>

$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

— Zeeshan
แหล่งที่มา

ในขณะที่ข้อมูลโค้ดนี้อาจแก้ไขคำถามรวมถึงคำอธิบายช่วยปรับปรุงคุณภาพของโพสต์ของคุณ จำไว้ว่าคุณกำลังตอบคำถามสำหรับผู้อ่านในอนาคตและคนเหล่านั้นอาจไม่ทราบสาเหตุของการแนะนำรหัสของคุณ

— Derek Brown

ขอบคุณดีเร็กจะเก็บเรื่องนี้ไว้ในใจของฉันในครั้งต่อไปเป็นต้นไป

— Zeeshan

14

คุณควรเพิ่มแอตทริบิวต์ id ให้กับแท็กรูปภาพของคุณเช่นนี้:

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

จากนั้นคุณสามารถใช้รหัสนี้เพื่อเปลี่ยนแหล่งที่มาของภาพ:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

— นายบิตแมป
แหล่งที่มา

9

คุณสามารถทำได้ด้วย jQuery ด้วยวิธีนี้:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

คุณสามารถมีเงื่อนไขได้หากมีหลายสถานะสำหรับแหล่งรูปภาพ

— FernandoEscher
แหล่งที่มา

5

ไวยากรณ์นี้ไม่ถูกต้อง jquery attr () ฟังก์ชั่นใช้เวลา 1 หรือ 2 params สิ่งแรกคือสตริงที่มีชื่อแอตทริบิวต์ HTML อย่างที่สองคือค่าของแอตทริบิวต์นั้นที่คุณต้องการตั้งค่า

— Thiago Silva

7

ฉันมีปัญหาเดียวกันเมื่อพยายามเรียกปุ่มแคปช่าอีกครั้ง หลังจากการค้นหาบางอย่างตอนนี้ฟังก์ชั่นด้านล่างนี้ใช้ได้ดีกับเบราว์เซอร์ที่มีชื่อเสียงเกือบทั้งหมด (chrome, Firefox, IE, Edge, ... ):

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'theUrl' ใช้เพื่อแสดงภาพแคปช่าใหม่และสามารถละเว้นได้ในกรณีของคุณ จุดที่สำคัญที่สุดคือการสร้าง URL ใหม่ซึ่งบังคับให้ FF และ IE ทำการแสดงรูปภาพซ้ำ

— Kayvan Tehrani
แหล่งที่มา

7

เปลี่ยนแหล่งรูปภาพโดยใช้ jQuery click()

ธาตุ:

    <img class="letstalk btn"  src="images/chatbuble.png" />

รหัส:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });

— Abhijit Poojari
แหล่งที่มา

7

ในกรณีที่คุณอัปเดตภาพหลายครั้งและได้รับCACHEDและไม่อัปเดตให้เพิ่มสตริงแบบสุ่มในตอนท้าย:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

— kintsukuroi
แหล่งที่มา

1

เป็นสิ่งสำคัญอย่างยิ่งสำหรับฉันที่จะเพิ่มสตริงแบบสุ่มในตอนท้าย! ถัง!

— Marcelo Sader

3

วันนี้ฉันมีความประหลาดใจเหมือนกันฉันทำอย่างนี้

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

— Anyone_ph
แหล่งที่มา

3

นี่เป็นวิธีที่รับประกันได้ว่าจะทำให้เสร็จใน JavaScript (หรือเพียว ๆ ) JavaScript:

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;

— Raymond Wachaga
แหล่งที่มา

1

นอกจากนี้เพื่อให้เล็กยิ่งขึ้น:

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});

— Szél Lajos
แหล่งที่มา

-1

ไม่มีวิธีในการเปลี่ยนแหล่งรูปภาพด้วย CSS

เพียงวิธีการที่เป็นไปได้คือการใช้JavascriptหรือJavascriptห้องสมุดเช่นjQuery

ตรรกะ-

ภาพอยู่ใน div และไม่มีclassหรือidมีภาพนั้น

ดังนั้นตรรกะจะถูกเลือกองค์ประกอบภายในdivที่ตั้งของภาพ

จากนั้นเลือกทุกองค์ประกอบภาพที่มีห่วงและเปลี่ยน src ภาพที่มีJavascript / jQuery

รหัสตัวอย่างที่มีเอาท์พุทสาธิต -

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>

ขยายตัวอย่างข้อมูล

— Abrar Jahin
แหล่งที่มา