वर्तमान में मैं एक कुंजी में प्रदान की गई जानकारी के आधार पर पृष्ठ पर एक विशिष्ट बटन को गतिशील रूप से बदलने के लिए कुछ कोड सेट कर रहा हूं। मैं प्रोग्रामिंग और jQuery/जावास्क्रिप्ट के लिए अपेक्षाकृत नया हूं और मैं सभी उत्तरों के लिए आभारी हूं!
समस्या: मैं एक यूआरएल को सहेजना चाहता हूं जो एक srcset विशेषता का मान है ताकि इसे बटन-लिंक को बदलने के लिए कुंजी में सहेजा जा सके। कुछ 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>
मैंने अपने आवश्यक srcset का चयन करने के लिए विभिन्न jQuery विधियों का प्रयास किया है, लेकिन मैं विशेष रूप से अपने 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']")
अपेक्षित परिणाम पूरे URL को आवश्यक 1 srcset से प्राप्त करना और इसे एक विशिष्ट कुंजी में सहेजना होगा। अभी तक मैं यह नहीं समझ पाया कि इसे ठीक से कैसे किया जाए।
प्रलेखन के उपयुक्त भाग के लिए एक सूचक भी पर्याप्त होगा, क्योंकि मैं जावास्क्रिप्ट सीखना चाहता हूँ!
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>