时间戳

首页 > 解决方案 > 如何选择和使用 srcset 属性的值？

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

问题描述

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

标签： javascriptjqueryhtml

解决方案

一种解决方案是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>

推荐阅读