如何选择和使用 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;">

  <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>

Answer 2

尝试

document.querySelectorAll('source').forEach(src=> {

  if(/KQ4/.test(src.srcset)) {

    // 'src' contains selection

  }

});

document.querySelectorAll('source').forEach(src=> {

  if(/KQ4/.test(src.srcset)) {

    console.log( src.media );

    // your selected source tag is in 'src'`

}});

<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>

Answer 3

您尝试使用*并且contains应该可以工作，您所做的唯一错误是您试图匹配 div 内容而不是 div 内容中的源。

试试下面的代码

$("div.unique_img  source[srcset*=KQ4]") // this will return matching image having matching `srcset`