本文介绍了使用 jquery 选择源“srcset"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道如何使用 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"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!