如何选择和使用srcset属性的值？

debugcn 发表于 Dev

domix07

目前，我正在设置一些代码，以根据键中提供的信息动态更改页面上的特定按钮。我是编程和jQuery / JavaScript的新手，感谢所有答案！

问题：我想保存作为srcset属性值的URL，以便可以将其保存到用于更改按钮链接的键中。有一些srcset属性，我需要的值在URL中具有唯一标识符（例如 www.url.com/this-is-a-sample-image/KQ4/...，KQ4作为唯一标识符）。例如，其他srcset属性包括KQ6，KQ2等等。

如何选择所需的srcset属性（如信息：该属性始终位于<picture>标记下的相同位置）并将其内容保存到密钥中？

<div class="unique_img" style="margin-left: 0px;">
  <picture>
    <source srcset="www.url.com/this-is-a-sample-image/KQ4/..., www.url.com/this-is-a-sample-image/KQ4/... 2x" media="min-width: xx")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ6/..., www.url.com/this-is-a-sample-image/KQ6/... 2x" media="min-width: yy")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ8/..., www.url.com/this-is-a-sample-image/KQ8/... 2x" media="min-width: zz")>
  </picture>
</div>

我尝试了各种jQuery方法来srcset选择所需的方法，但无法专门搜索我的方法KQ4：

$("div.unique_img[srcset*=KQ4]") 
$("div.unique_img:contains('KQ4')") 
$('div.unique_img:nth-child(1)') 
$('div.unique_img').find('KQ4') 
$('div.unique_img .srcset') 
$("img[name*='KQ4']")

预期的结果是从所需的1st获取整个URL srcset，并将其保存到特定的密钥。截至目前，我仍无法弄清楚该怎么做。

只要我要学习JavaScript，指向文档相应部分的指针就足够了！

该死的

一种解决方案是KQ4在选择器中添加

var element = document.querySelector('.unique_img source[srcset*="KQ4"]');

console.log(element.srcset);

<div class="unique_img" style="margin-left: 0px;">
  <picture>
    <source srcset="www.url.com/this-is-a-sample-image/KQ4/..., www.url.com/this-is-a-sample-image/KQ4/... 2x" media="min-width: xx")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ6/..., www.url.com/this-is-a-sample-image/KQ6/... 2x" media="min-width: yy")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ8/..., www.url.com/this-is-a-sample-image/KQ8/... 2x" media="min-width: zz")>
  </picture>
</div>

另一个解决方案是选择所有元素，遍历它们并检查字符串值：

var sources = document.querySelectorAll('.unique_img source');
var targetSource = null;
[...sources].forEach(function(source) {
    
    if(source.srcset.indexOf('KQ4') !== -1) {
        targetSource = source.srcset;
    }
});


console.log(targetSource);

<div class="unique_img" style="margin-left: 0px;">
  <picture>
    <source srcset="www.url.com/this-is-a-sample-image/KQ4/..., www.url.com/this-is-a-sample-image/KQ4/... 2x" media="min-width: xx")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ6/..., www.url.com/this-is-a-sample-image/KQ6/... 2x" media="min-width: yy")>
    <source srcset="www.url.com/this-is-a-sample-image/KQ8/..., www.url.com/this-is-a-sample-image/KQ8/... 2x" media="min-width: zz")>
  </picture>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。