使用 jquery 选择源“srcset" [英] Select source 'srcset' with jquery

问题描述

我想知道如何使用 js 在我的代码中选择 spcecific 'srcset'.这是我实际上不起作用的 js 代码:

I would like to know how to select spcecific 'srcset' in my code using js. This is my actually not working js code :

var imgPath = $('.wp-post-image').attr('srcset');
$('.tax-product_tag .breadcrumbs').css('background', 'url(' + imgPath + ')');

这里是 HTML :

<img width="300" height="300" src="//agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="//agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-300x300.jpg 300w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-150x150.jpg 150w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-768x768.jpg 768w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-1024x1024.jpg 1024w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-575x575.jpg 575w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-190x190.jpg 190w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-370x370.jpg 370w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-600x600.jpg 600w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-100x100.jpg 100w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-400x400.jpg 400w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-900x900.jpg 900w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-675x675.jpg 675w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-286x286.jpg 286w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-450x450.jpg 450w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-1080x1080.jpg 1080w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine.jpg 1500w" sizes="(max-width: 300px) 100vw, 300px">

js 代码正在使用 'src' 属性，但这是选择 300x300 jpeg，我想获取原始 jpeg ( agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine.jpg )

The js code is working with 'src' attribute but this is selecting the 300x300 jpeg and i would like to get the orginal jpeg ( agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine.jpg )

非常感谢帮助，第一次使用堆栈溢出，如果我的问题有误，请见谅.

Thks a lot for help, first time using stack overflow, sorry if I did mistakes with my question.

推荐答案

$('img').each(function(){   //for loop all images
	var srcset=$(this).attr('srcset');  //attribut value
	var srcset_arr=srcset.split(', ');  //value to array
	for(var key in srcset_arr){         //loop array 
		if(key==srcset_arr.length-1){  //find last  element
		   var orig_image=(srcset_arr[key]).split(' ')[0];  //first element of sub array
		   console.log(orig_image);
		}

	}

});

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



<img width="300" height="300" src="//agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image" alt="" srcset="//agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-300x300.jpg 300w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-150x150.jpg 150w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-768x768.jpg 768w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-1024x1024.jpg 1024w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-575x575.jpg 575w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-190x190.jpg 190w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-370x370.jpg 370w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-600x600.jpg 600w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-100x100.jpg 100w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-400x400.jpg 400w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-900x900.jpg 900w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-675x675.jpg 675w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-286x286.jpg 286w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-450x450.jpg 450w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine-1080x1080.jpg 1080w, //agothegoodlifestore.com/wp-content/uploads/2018/04/la-mericaine.jpg 1500w" sizes="(max-width: 300px) 100vw, 300px">

这篇关于使用 jquery 选择源“srcset"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！