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

Question

目前，我正在设置一些代码，以根据键中提供的信息动态更改页面上的特定按钮。我对编程和 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']") 

预期的结果是从所需的第一个获取整个 URLsrcset并将其保存到特定键。到目前为止，我仍然无法弄清楚如何准确地做到这一点。

指向文档适当部分的指针也足够了，因为我想学习 JavaScript！

Answer 1

一种解决方案是KQ4在选择器中添加var element = document.querySelector('.unique_img source[srcset*="KQ4"]');console.log(element.srcset);<div class="unique_img" style="margin-left: 0px;">&nbsp; <picture>&nbsp; &nbsp; <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")>&nbsp; &nbsp; <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")>&nbsp; &nbsp; <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")>&nbsp; </picture></div>另一种解决方案是选择所有元素，遍历它们并检查字符串值：var sources = document.querySelectorAll('.unique_img source');var targetSource = null;[...sources].forEach(function(source) {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if(source.srcset.indexOf('KQ4') !== -1) {&nbsp; &nbsp; &nbsp; &nbsp; targetSource = source.srcset;&nbsp; &nbsp; }});console.log(targetSource);<div class="unique_img" style="margin-left: 0px;">&nbsp; <picture>&nbsp; &nbsp; <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")>&nbsp; &nbsp; <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")>&nbsp; &nbsp; <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")>&nbsp; </picture></div>

Answer 2

尝试document.querySelectorAll('source').forEach(src=> {&nbsp; if(/KQ4/.test(src.srcset)) {&nbsp; &nbsp; // 'src' contains selection&nbsp; }});document.querySelectorAll('source').forEach(src=> {&nbsp; if(/KQ4/.test(src.srcset)) {&nbsp; &nbsp; console.log( src.media );&nbsp; &nbsp; // your selected source tag is in 'src'`}});<div class="unique_img" style="margin-left: 0px;">&nbsp; <picture>&nbsp; &nbsp; <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")>&nbsp; &nbsp; <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")>&nbsp; &nbsp; <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")>&nbsp; </picture></div>

Answer 3

您尝试使用*并且contains应该可以工作，您所做的唯一错误是您试图匹配 div 内容而不是 div 内容中的源。试试下面的代码$("div.unique_img&nbsp;&nbsp;source[srcset*=KQ4]")&nbsp;//&nbsp;this&nbsp;will&nbsp;return&nbsp;matching&nbsp;image&nbsp;having&nbsp;matching&nbsp;`srcset`