मेरे पास एक प्रकाश बॉक्स के साथ एक तत्व में एक छवि हैछवि जो हॉवर पर दिखाई देती है। मैं प्रकाश बॉक्स छवि के साथ तत्व में छवि को बदलना चाहता हूं। मेरी सामग्री गतिशील रूप से मेल खाती है, और मैं HTML नहीं बदल सकता।
मेरी सभी छवियाँ url / 250/250 के साथ समाप्त होती हैं - और lighbox छवियों में से कुछ / 400/300 के साथ समाप्त होती हैं - और मैं उन्हें बदलने के लिए नीचे दी गई स्क्रिप्ट का उपयोग करता हूं:
$(".new-structure .image a img").each(function () {
var src = $(this).attr("src");
$(this).attr("src", src.replace("/250/250", "/400/300"));
});
लेकिन कुछ प्रकाश बॉक्स छवियों का एक और अंत है कि मैं स्क्रिप्ट के लिए काम नहीं कर सकता। वे कुछ इस तरह दिखते हैं:
/img/0~BC6F034B-3404-4FBA-B26A-9B2990552E72~400~300~1
मैं 400 ~ 300 ~ 1 के साथ समाप्त होने वाली / 250/250 के साथ छवि का मिलान कैसे करूं?
अद्यतन: मुख्य समस्या: जब मैं 300/400 के लिए 250/250 को प्रतिस्थापित करता हूं तो मुझे पूर्ण लिंक को बदलने की आवश्यकता नहीं होती है - वे समाप्त होने के अलावा समान हैं - जब ~ 400 ~ 300 ~ 1 छवि के लिए प्रतिस्थापित किया जा रहा है तो मुझे पूर्ण लिंक को स्वैप करने की आवश्यकता है क्योंकि इसके अलग होने के बाद ।
मुझे इसे बदलने की आवश्यकता है:
https://mywebsite.com/imgs/2d873287-7eb5-497a-a813-aef655acdb74/250/250
इसके साथ:
https://mywebsite.com/img/0~3B07CED6-08FF-47CD-9D25-D908774F728D~400~300~1
छवि के आकार के लिए यूआरएल में समाप्त होने के आधार पर: / 250/250 और ~ 400 ~ 300 ~ 1
अद्यतन: यह महसूस किया कि यह आसान हो सकता है बस उन्हें अपने तत्व वर्गों के आधार पर स्वैप करने के लिए ..
लाइटबॉक्स की छवि इस प्रकार है:
<a class="mainColorbox" href="/img/0~676B9DBB-5D93-4481-B241-74B619F96188~400~300~1"></a>
लक्ष्य छवि:
<div class="mainPicture">
<img src="/images//imgs/7fb6d7bd-b9e7-44b2-a533-a485b93456ac/250/250" class="photo">
उत्तर:
उत्तर № 1 के लिए 1स्ट्रिंग को बदलने के लिए उपयोगकर्ता Regex कोड:
var str = "some // slashes", replacement = "";
var replaced = str.replace(///g, replacement);
अन्यथा स्लैश को आपके उदाहरण की तरह एनकोड किया जाएगा।
यहाँ और अधिक जानकारी प्राप्त करें: कैसे एक जावास्क्रिप्ट स्ट्रिंग में विश्व स्तर पर एक आगे स्लैश की जगह?