Actualmente estoy configurando un código para cambiar dinámicamente un botón específico en la página según la información proporcionada en una clave. Soy relativamente nuevo en programación y jQuery / JavaScript y estoy agradecido por todas las respuestas.
Problema: deseo guardar una URL que sea un valor de un atributo srcset
para que pueda guardarse en la clave para cambiar el enlace del botón. Hay algunos atributos srcset
y mi valor necesario tiene un identificador único en la URL ( por ejemplo www.url.com/this-is-a-sample-image/KQ4/...
siendo KQ4
el identificador único). Los otros atributos srcset
tienen KQ6
, KQ2
, etc., como ejemplo.
¿Cómo puedo seleccionar mi atributo srcset
necesario (como información: siempre está en la misma posición bajo la etiqueta <picture>
) y guardar su contenido en la clave?
<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>
He probado varios métodos de jQuery para seleccionar mi srcset
necesario, pero no puedo buscar específicamente mi 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']")
El resultado esperado sería obtener la URL completa de la primera srcset
necesaria y guardarla en una clave específica. A partir de ahora todavía no he podido descubrir cómo hacerlo exactamente.
¡Un puntero a la parte apropiada de la documentación también sería suficiente, ya que quiero aprender JavaScript!
3 respuestas
Una solución es agregar KQ4
en el selector
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>
Otra solución es seleccionar todos los elementos, iterar sobre ellos y verificar el valor de la cadena:
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>
Tratar
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>
Su intento de usar *
y contains
debería funcionar, el único error que cometió es que está tratando de hacer coincidir el contenido div en lugar de la fuente dentro del contenido div.
Prueba el siguiente código
$("div.unique_img source[srcset*=KQ4]") // this will return matching image having matching `srcset`
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.