Thay đổi nguồn hình ảnh bằng jQuery

764

DOM của tôi trông như thế này:

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

Khi ai đó nhấp vào hình ảnh, tôi muốn hình ảnh src thay đổi thành <img src="imgx_off.gif">nơi xđại diện cho hình ảnh số 1 hoặc 2.

Điều này có thể hay tôi phải sử dụng CSS để thay đổi hình ảnh?

javascript  jquery  image 
— người dùng67033
nguồn
Nếu bạn muốn một cái gì đó bằng cách sử dụng jQuery, bạn có thể muốn xem xét Plugin jQuery Chu kỳ, hãy cuộn demo demo (ví dụ dưới cùng bên phải)
— TomHastjarjanto
43
jQuery ("# ​​my_image"). Attr ("src", "first.jpg")
— manut nautiyal
9
Bạn thực sự nên chấp nhận câu trả lời của jonstjohn :) Số lượng câu hỏi cho cả câu hỏi và câu trả lời cho thấy rất nhiều người đã gặp phải vấn đề này. Nó sẽ cải thiện câu hỏi để có một câu trả lời được chấp nhận.
— Xcelled
4
Đến ngày, tức là 19th July, 2016 15:39 PM, Upvotes Count 369 và @jonstjohn Trả lời Upvotes Count 931 . Nhưng, Thật là Xui xẻo, @OP đã không đăng nhập sau đó Feb 17 '09 at 2:57. :(Và, @jonstjohn Trả lời Vẫn chưa được đánh dấu .
— Nana Partykar
@Xcelled, vấn đề duy nhất là câu trả lời của jonstjohn không trả lời câu hỏi. Đó là một điểm nhỏ nhưng đáng làm. Hãy xem câu trả lời của inco vì đây là người duy nhất ở đây thực sự trả lời đúng câu hỏi.
— David Newcomb

Câu trả lời:

1687

Bạn có thể sử dụng hàm attr () của jQuery . Ví dụ: nếu imgthẻ của bạn có idthuộc tính 'my_image', bạn sẽ làm điều này:

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

Sau đó, bạn có thể thay đổi srchình ảnh của mình bằng jQuery như thế này:

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

Để đính kèm điều này vào một clicksự kiện, bạn có thể viết:

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

Để xoay hình ảnh, bạn có thể làm điều này:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});
— jonstjohn
nguồn
79

Một trong những lỗi phổ biến mà mọi người thường mắc phải khi thay đổi nguồn hình ảnh là không chờ tải hình ảnh để thực hiện các hành động tiếp theo như trưởng thành kích thước hình ảnh, v.v. Bạn sẽ cần sử dụng .load()phương thức jQuery để thực hiện công cụ sau khi tải hình ảnh.

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

});

Lý do chỉnh sửa: https://stackoverflow.com/a/670433/561545

— Mohsen
nguồn
Đúng. Điều này cuối cùng đã làm được mẹo. .destroy () không đi đủ gần. Nuking tất cả các html và hơn init một lần nữa thực sự hoạt động khi hoán đổi hình ảnh có kích thước khác nhau và như vậy.
— Matt J.
lưu ý rằng tải sẽ không cháy một cách đáng tin cậy, đặc biệt nếu hình ảnh nằm trong bộ đệm. Xem tài liệu jQuery.
— Twilite
19

Để biết thêm thông tin. Tôi thử đặt thuộc tính src với phương thức attr trong jquery cho hình ảnh quảng cáo bằng cách sử dụng cú pháp ví dụ:$("#myid").attr('src', '/images/sample.gif');

Giải pháp này rất hữu ích và nó hoạt động nhưng nếu thay đổi đường dẫn cũng thay đổi đường dẫn cho hình ảnh và không hoạt động.

Tôi đã tìm cách giải quyết vấn đề này nhưng không tìm thấy gì.

Giải pháp là đặt '\' ở đầu đường dẫn: $("#myid").attr('src', '\images/sample.gif');

Thủ thuật này rất hữu ích cho tôi và tôi hy vọng nó hữu ích cho người khác.

— wphonestudio
nguồn
18

NẾU không chỉ có jQuery hoặc các khung tiêu diệt tài nguyên khác - nhiều kb để tải xuống mỗi lần bởi mỗi người dùng chỉ vì một mẹo đơn giản - mà còn là JavaScript nguyên gốc (!):

<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';">

Điều này có thể được viết chung chung và thanh lịch hơn:

<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
nguồn
Nó luôn làm tôi ngạc nhiên khi có bao nhiêu người không thể đọc một câu hỏi và đưa ra câu trả lời được yêu cầu. Tôi (và bạn) dường như rõ ràng rằng câu hỏi đang tìm kiếm một giải pháp chung, đó là lý do tại sao OP đưa ra 2 ví dụ. Nhưng mọi người khác dường như không chỉ hoàn toàn bỏ lỡ nó mà còn đưa ra một câu trả lời thậm chí không trả lời câu hỏi. :(
— David Newcomb
17

Tôi sẽ chỉ cho bạn cách thay đổi hình ảnh src, để khi bạn nhấp vào hình ảnh, nó sẽ xoay qua tất cả các hình ảnh trong HTML của bạn ( cụ thể là trong d1id và c1lớp của bạn ) ... cho dù bạn có 2 hình ảnh trở lên trong HTML hay không .

Tôi cũng sẽ chỉ cho bạn cách làm sạch trang sau khi tài liệu đã sẵn sàng, để chỉ có một hình ảnh được hiển thị ban đầu.

Mã đầy đủ

$(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();

    });
});

Sự phá vỡ

  1. Tạo một bản sao của các liên kết có chứa hình ảnh (lưu ý: bạn cũng có thể sử dụng thuộc tính href của các liên kết để thêm chức năng ... ví dụ: hiển thị liên kết hoạt động bên dưới mỗi hình ảnh ):

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

  2. Kiểm tra có bao nhiêu hình ảnh trong HTML và tạo một biến để theo dõi hình ảnh nào đang được hiển thị:

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

  3. Sửa đổi HTML của tài liệu để chỉ hình ảnh đầu tiên được hiển thị. Xóa tất cả các hình ảnh khác.

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

  4. Ràng buộc một chức năng để xử lý khi nhấp vào liên kết hình ảnh.

        $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });

    Trung tâm của đoạn mã trên đang sử dụng ++$imgShow % $lengthđể xoay vòng qua đối tượng jQuery chứa các hình ảnh. ++$imgShow % $lengthđầu tiên tăng bộ đếm của chúng tôi lên một, sau đó nó sửa đổi số đó với số lượng hình ảnh có. Điều này sẽ giữ cho chỉ số kết quả đi xe đạp từ 0đến length-1, đó là các chỉ số của $imagesđối tượng. Điều này có nghĩa là mã này sẽ hoạt động với 2, 3, 5, 10 hoặc 100 hình ảnh ... quay vòng qua từng hình ảnh theo thứ tự và khởi động lại ở hình ảnh đầu tiên khi đạt đến hình ảnh cuối cùng.

    Ngoài ra, .attr()được sử dụng để lấy và đặt thuộc tính "src" của hình ảnh. Để chọn các yếu tố trong số các $imagesđối tượng, tôi đặt $imageslà bối cảnh jQuery sử dụng biểu mẫu $(selector, context). Sau đó, tôi sử dụng .eq()để chỉ chọn phần tử có chỉ mục cụ thể mà tôi quan tâm.

ví dụ jsFiddle với 3 hình ảnh


Bạn cũng có thể lưu trữ srcs trong một mảng.
ví dụ jsFiddle với 3 hình ảnh

Và đây là cách kết hợp các href từ các thẻ neo xung quanh các hình ảnh:
ví dụ jsFiddle

— Peter Ajtai
nguồn
17

Hy vọng điều này có thể làm việc

<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
nguồn
Mặc dù đoạn mã này có thể giải quyết câu hỏi, bao gồm một lời giải thích thực sự giúp cải thiện chất lượng bài đăng của bạn. Hãy nhớ rằng bạn đang trả lời câu hỏi cho độc giả trong tương lai và những người đó có thể không biết lý do cho đề xuất mã của bạn.
— Derek Brown
Cảm ơn Derek sẽ giữ điều này trong tâm trí tôi từ lần sau trở đi
— Zeeshan
14

Bạn nên thêm thuộc tính id vào thẻ hình ảnh của mình, như thế này: 

<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>

sau đó bạn có thể sử dụng mã này để thay đổi nguồn hình ảnh:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });
— Ông Bitmap
nguồn
9

Bạn cũng có thể làm điều này với jQuery theo cách này:

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

Bạn có thể có một điều kiện nếu có nhiều trạng thái cho nguồn hình ảnh.

— FernandoEscher
nguồn
5
cú pháp này không đúng hàm jquery attr () mất 1 hoặc 2 params. Chuỗi đầu tiên là một chuỗi có tên thuộc tính HTML, chuỗi thứ hai là giá trị cho thuộc tính mà bạn muốn đặt.
— Thiago Silva
7

Tôi gặp vấn đề tương tự khi cố gắng gọi lại nút captcha. Sau một số tìm kiếm, giờ đây chức năng dưới đây hoạt động tốt trong hầu hết các trình duyệt nổi tiếng (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' được sử dụng để hiển thị hình ảnh xác thực mới và có thể bỏ qua trong trường hợp của bạn. Điểm quan trọng nhất là tạo URL mới buộc FF và IE phải đăng ký lại hình ảnh.

— Kayvan Tehrani
nguồn
7

Thay đổi nguồn hình ảnh bằng jQuery click()

thành phần:

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

mã:

    $(".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
nguồn
7

Trong trường hợp bạn cập nhật hình ảnh nhiều lần và nó bị CẮT và không cập nhật, hãy thêm một chuỗi ngẫu nhiên vào cuối:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
— kintukuroi
nguồn
1
Điều rất quan trọng, ít nhất là đối với tôi, để thêm chuỗi ngẫu nhiên vào cuối! Xe tăng!
— Marcelo Sader
3

Tôi có cùng một thắc mắc ngày hôm nay, tôi đã làm theo cách này:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});
— Bất cứ ai
nguồn
3

Đây là một cách được đảm bảo để hoàn thành nó trong JavaScript Vanilla (hoặc đơn giản là Pure):

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
— Raymond Wachaga
nguồn
1

Chỉ là một bổ sung, để làm cho nó thậm chí còn nhỏ hơn: 

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
— Szél Lajos
nguồn
-1

Không có cách nào để thay đổi nguồn hình ảnh bằng CSS.

Cách duy nhất có thể là sử dụng Javascript hoặc bất kỳ thư viện Javascript nào như jQuery .

Hợp lý-

Các hình ảnh bên trong một div và không có classhoặcid với hình ảnh đó.

Vì vậy, logic sẽ được chọn các yếu tố bên trong div nơi hình ảnh được đặt.

Sau đó chọn tất cả các thành phần hình ảnh có vòng lặp và thay đổi src hình ảnh bằng Javascript / jQuery .

Mã ví dụ với đầu ra demo-

$(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>
Mở rộng đoạn trích

— Abrar Jahin
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.