JQuery kullanarak görüntü kaynağını değiştirme

764

DOM'um şöyle görünüyor:

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

Birisi bir görüntüye tıkladığında, görüntü src'sinin 1 veya 2 numaralı görüntü numarasını temsil ettiği <img src="imgx_off.gif">yere değişmesini istiyorum x.

Bu mümkün mü veya görüntüleri değiştirmek için CSS kullanmak zorunda mıyım?

javascript  jquery  image 
— user67033
kaynak
JQuery kullanarak bir şey istiyorsanız, jQuery Cycle Plugin, demo scrollRight (sağ alt örnek)
— TomHastjarjanto
43
jQuery ("# ​​my_image"). attr ("src", "first.jpg")
— manish nautiyal
9
Jonstjohn'un cevabını gerçekten kabul etmelisiniz :) Hem soru hem de cevaptaki upvotes sayısı birçok insanın bu durumla karşılaştığını gösterir. Kabul edilen bir cevaba sahip olmak soruyu geliştirecektir.
— 14'te Xcelled
4
Kadar 19th July, 2016 15:39 PMRandevu , yani , Soru Upvotes Count 369 Ve @jonstjohn Cevap Olumlu oylar Count 931 . Ancak, Böyle Kötü Bir Şans, @ OP Daha Sonra Giriş Yapmadı Feb 17 '09 at 2:57. :(Ve, @jonstjohn Cevap Kalan işaretsiz .
— Nana Partykar
@Xcelled, tek sorun jonstjohn'un cevabının soruya cevap vermemesidir. Bu küçük bir nokta ama yapmaya değer. Burada soruyu doğru cevaplayan tek kişi olduğu için inco'nun cevabına bir göz atın.
— David Newcomb

Yanıtlar:

1687

Sen jQuery'nin kullanabilirsiniz attr () işlevi. Örneğin, imgetiketinizde id'my_image' özelliği varsa, bunu yaparsınız:

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

Ardından srcjQuery ile görüntünüzü şu şekilde değiştirebilirsiniz :

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

Bunu bir clicketkinliğe eklemek için şunu yazabilirsiniz:

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

Görüntüyü döndürmek için şunları yapabilirsiniz:

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

İnsanların görüntü kaynağını değiştirirken yaptıkları yaygın hatalardan biri, görüntü yükünün olgunlaşması vb .load().

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

});

Düzenleme nedeni: https://stackoverflow.com/a/670433/561545

— Mohsen
kaynak
Evet. Sonunda hile yaptı. .destroy () neredeyse yeterince ilerlemiyor. Tüm html ve n init tekrar nuking aslında çeşitli boyutlarda ve benzeri görüntüleri takas çalışırken çalışır.
— Matt J.
özellikle görüntü önbellekte bulunuyorsa yükün güvenilir şekilde tetiklenmeyeceğini unutmayın. JQuery belgelerine bakın.
— Twilite
19

Daha fazla bilgi için. Örneğin sözdizimini kullanarak reklam görüntüsü için jquery attr yöntemi ile src özniteliğini ayarlamayı deneyin:$("#myid").attr('src', '/images/sample.gif');

Bu çözüm kullanışlıdır ve çalışır ancak yolu değiştirirseniz görüntü ve çalışma yolu da değişir.

Bu sorunu çözmek için arama yaptım ama hiçbir şey bulamadım.

Çözüm '\' başını yola koyuyor: $("#myid").attr('src', '\images/sample.gif');

Bu numara benim için çok yararlı ve umarım diğerleri için faydalıdır.

— wphonestudio
kaynak
18

Sadece jQuery veya diğer kaynak öldürme çerçeveleri yoksa - her kullanıcı tarafından basit bir numara için her seferinde indirmek için birçok kb - aynı zamanda yerel 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';">

Bu genel ve daha zarif yazılabilir:

<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>
— giz
kaynak
Kaç kişinin bir soruyu okuyamaması ve istenen cevabı verememesi beni her zaman şaşırtıyor. Bana (ve siz) sorunun genel bir çözüm aradığı açıktı. OP bu yüzden 2 örnek verdi. Yine de herkes sadece tamamen kaçırmakla kalmadı, aynı zamanda soruyu bile cevaplamayan bir cevap verdi. :(
— David Newcomb
17

Görüntüyü nasıl değiştireceğinizi göstereceğim src, böylece bir resmi tıkladığınızda HTML'nizdeki ( özellikle d1kimliğiniz ve c1sınıfınızda) tüm resimler arasında döner ... HTML'nizde 2 veya daha fazla resminiz olsun .

Ayrıca, belge hazır olduktan sonra sayfayı nasıl temizleyeceğinizi göstereceğim, böylece başlangıçta yalnızca bir resim görüntülenecektir.

Tam kod

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

    });
});

Arıza

  1. Görüntüleri içeren bağlantıların bir kopyasını oluşturun (not: ek işlevsellik için bağlantıların href özelliğini de kullanabilirsiniz ... örneğin her görüntünün altında çalışan bağlantıyı görüntüleyebilirsiniz ):

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

  2. HTML'de kaç resim olduğunu kontrol edin ve hangi resmin gösterildiğini izlemek için bir değişken oluşturun:

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

  3. Yalnızca ilk resim gösterilecek şekilde belgenin HTML'sini değiştirin . Diğer tüm resimleri silin.

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

  4. Resim bağlantısı tıklandığında işlenecek bir işlevi bağlayın.

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

    Yukarıdaki kodun kalbi ++$imgShow % $lengthgörüntüleri içeren jQuery nesnesi arasında geçiş yapmak için kullanıyor . ++$imgShow % $lengthönce sayacımızı bir arttırır, daha sonra bu sayıyı kaç tane görüntüyle değiştirir. Bu gelen sonuçtaki endeks bisiklet tutacak 0kadar length-1endeksleri olan $imagesnesne. Bu, bu kodun 2, 3, 5, 10 veya 100 görüntü ile çalışacağı anlamına gelir ... her görüntüyü sırayla çevirir ve son görüntüye ulaşıldığında ilk görüntüde yeniden başlar.

    Ayrıca, .attr()görüntülerin "src" özniteliğini almak ve ayarlamak için kullanılır. $imagesNesnenin içinden öğeleri seçmek için formu kullanarak jQuery bağlamı$images olarak ayarladım . Sonra sadece ilgilendiğim belirli bir dizine sahip elemanı seçmek için kullanıyorum .$(selector, context).eq()

3 resimli jsFiddle örneği


Ayrıca s'leri srcbir dizide saklayabilirsiniz .
3 resimli jsFiddle örneği

Ve burada çapa etiketlerinden hreflerin resimlerin etrafına nasıl dahil edileceği:
jsFiddle örneği

— Peter Ajtai
kaynak
17

Umarım bu işe yarayabilir

<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
kaynak
Bu kod snippet'i soruyu çözebilir, ancak bir açıklama da dahil olmak üzere , yayınınızın kalitesini artırmaya yardımcı olur. Gelecekte okuyucular için soruyu cevapladığınızı ve bu kişilerin kod önerinizin nedenlerini bilmeyebileceğini unutmayın.
— Derek Brown
Teşekkürler Derek bir dahaki sefere aklımda bu şeyi tutacak
— Zeeshan
14

Resim etiketinize şu şekilde kimlik özelliği eklemelisiniz: 

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

görüntülerin kaynağını değiştirmek için bu kodu kullanabilirsiniz:

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

Bunu jQuery ile şu şekilde de yapabilirsiniz:

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

Görüntü kaynağı için birden fazla durum varsa bir koşulunuz olabilir.

— FernandoEscher
kaynak
5
bu sözdizimi doğru değil. jquery attr () işlevi 1 veya 2 parametre alır. Birincisi HTML öznitelik adına sahip bir dize, ikincisi ayarlamak istediğiniz o özniteliğin değeridir.
— Thiago Silva
7

Yeniden captcha düğmesini aramaya çalışırken aynı sorunu yaşadım. Bazı aramalardan sonra, aşağıdaki işlev hemen hemen tüm ünlü tarayıcılarda (krom, Firefox, IE, Edge, ...) iyi çalışıyor:

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

'theUrl' yeni captcha görüntüsü oluşturmak için kullanılır ve durumunuzda yok sayılabilir. En önemli nokta, FF ve IE'yi görüntüyü yeniden oluşturmaya zorlayan yeni URL oluşturmaktır.

— Kayvan Tahrani
kaynak
7

JQuery kullanarak görüntü kaynağını değiştirme click()

öğe:

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

kod:

    $(".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
kaynak
7

Görüntüyü birden çok kez güncelleştirmeniz ve önbelleğe alınması ve güncellenmemesi durumunda, sonuna rastgele bir dize ekleyin:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
— kintsukuroi
kaynak
1
En azından benim için, rastgele dizeyi sonuna eklemek çok önemlidir! Tanklar!
— Marcelo Sader
3

Bugün aynı harikayım, bu şekilde yaptım:

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

Bu, Vanilla (veya sadece Pure) JavaScript'te yapılmasını garanti eden bir yoldur:

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

Daha da küçük yapmak için sadece bir ek: 

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

Görüntü kaynağını CSS ile değiştirmenin bir yolu yoktur.

Sadece olası yol Javascript veya jQuery gibi herhangi bir Javascript kütüphanesini kullanmaktır .

Mantık-

Görüntüler bir div içinde ve bu görüntüde classya da hiç yok id.

Böylece mantık div, görüntülerin bulunduğu yerdeki öğeleri seçecektir .

Sonra döngü ile tüm görüntü öğelerini seçin ve Javascript / jQuery ile görüntü src değiştirin .

Demo çıktı ile Örnek Kod

$(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>
Snippet'i genişlet

— Abrar Jahin
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.