So holen Sie die URL img srcset mit jquery

Question

Ich habe ein Image-Tag mit srcset-Attribut mit einem Wert (URL). Jetzt muss ich es auch für src Attribut holen und erzeugen.

$('img').attr('srcset') 

Der obige Code funktioniert nicht und gibt undefined zurück.

<img srcset="http://s7d2.scene7.com/is/image/Hod/Mobile600x160?$600x160$" alt=""> 

Ich brauche oben srcset Wert ("http://s7d2.scene7.com/is/image/Hod/Mobile600x160? $ 600x160 $") und fügen Sie den gleichen Wert für src-Attribut zu holen. Freundlich helfen.

Vielen Dank im Voraus.

Answer 1

Sie müssen warten, bis die dom geladen ist: $(document).ready(function(){})

$(document).ready(function(){ 
 
    var img = $('.img'); 
 
    img.each(function(){ 
 
    this.src = this.srcset; 
 
    }); 
 
});

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

 
<img class="img" srcset="http://s7d2.scene7.com/is/image/Hod/Mobile600x160?$600x160$" alt=""> 
 
<img class="img" srcset="http://s7d2.scene7.com/is/image/Hod/Mobile600x160?$600x160$" alt="">

Sie können immer noch zurück zu $('img') statt $('.img') ändern, aber bewusst sein, dass dann all img-Tag vorangetrieben werden.

Answer 2

HTML

<img src="http://jonathonleathers.com/images/germany-src.jpg" 
    srcset="http://jonathonleathers.com/images/germany-1x.jpg 1x, 
      http://jonathonleathers.com/images/germany-2x.jpg 2x" 
    alt="Germany" 
    id="photo-full"> 

<div class="thumbs"> 
    <img src="http://jonathonleathers.com/images/germany-src-thumb.jpg" 
     srcset="http://jonathonleathers.com/images/germany-1x-thumb.jpg 1x, 
       http://jonathonleathers.com/images/germany-2x-thumb.jpg 2x" 
     alt="Germany" 
     data-full-src="http://jonathonleathers.com/images/germany-src.jpg" 
     data-full-srcset="http://jonathonleathers.com/images/germany-1x.jpg 1x, 
       http://jonathonleathers.com/images/germany-2x.jpg 2x"> 
    <img src="http://jonathonleathers.com/images/hawaii-src-thumb.jpg" 
     srcset="http://jonathonleathers.com/images/hawaii-1x-thumb.jpg 1x, 
       http://jonathonleathers.com/images/hawaii-2x-thumb.jpg 2x" 
     alt="Hawaii" 
     data-full-src="http://jonathonleathers.com/images/hawaii-src.jpg" 
     data-full-srcset="http://jonathonleathers.com/images/hawaii-1x.jpg 1x, 
       http://jonathonleathers.com/images/hawaii-2x.jpg 2x"> 
</div> 

JS

var $src = $(this).attr('data-full-src'); 
    var $srcset = $(this).attr('data-full-srcset'); 
    var $alt = $(this).attr('alt'); 
    $('#photo-full').attr('src', $src); 
    $('#photo-full').attr('srcset', $srcset); 
    $('#photo-full').attr('alt', $alt); 

für refrence http://codepen.io/jtleathers/pen/IGytf

Answer 3

Verwenden Sie dies funktioniert es für mich! wie XzenTorXz sagte oben mit einer kleinen Änderung:

$(document).ready(function(){ 
    var img = $('img[srcset]'); 
    img.each(function(){ 
    this.src = $(this).attr('srcset'); 
    }); 
}); 

Answer 4

jQuery(document).ready(function($) { 
    jQuery('.woocommerce-product-gallery__image img').click(function(e) { 
    e.preventDefault(); 
    var src = jQuery(this).attr('src'); 
    var srcset = jQuery(this).attr('srcset'); 
    var alt = jQuery(this).attr('alt'); 
    alert(srcset); 
    jQuery('.images .zoom .wp-post-image').attr('src', src); 
    jQuery('.images .zoom .wp-post-image').attr('srcset', srcset); 
    jQuery('.images .zoom .wp-post-image').attr('alt', alt); 
    }); 
});