jQuery

Question 1

नीचे दिए गए कोड में मैं यह पता लगाने में सक्षम होना चाहता हूं कि एचटीएमएल तत्व .img से यूआरएल सेट है या नहीं। उदाहरण के आधार पर, कोई यूआरएल सेट नहीं किया गया है और इसलिए .status को "इमेज इज सेट" नहीं पढ़ना चाहिए क्योंकि तत्व पर कोई यूआरएल नहीं है।

if ($(".img").css("background-image", "url") != "") {
  $(".status").html("Image is Set");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="status">No Image Set</div>
<div class="img" style="background-image: url('')"></div>

jquery

0

Kyle Underhill 22 जिंदा 2021, 06:26

FYI करें, url('') एक मान्य URL है। यह वर्तमान पृष्ठ को संदर्भित करता है। वहां एक खाली स्ट्रिंग का उपयोग करना अच्छा नहीं है

–

Phil

22 जिंदा 2021, 06:34

Answer

.css("background-image", "url") का उपयोग करके बैकग्राउंड-इमेज प्रॉपर्टी को मान पर सेट किया जा रहा है url और jQuery ऑब्जेक्ट संदर्भ लौटाएं जो कभी भी "" के बराबर नहीं होगा।

साथ ही, url('') वास्तव में वर्तमान पृष्ठ URL को संदर्भित करता है, इसलिए jQuery के .css("background-image") का उपयोग करने से दुर्भाग्य से url(http://localhost.com/) जैसी किसी चीज़ का समाधान हो जाएगा।

आपको इसके बजाय मूल्य का निरीक्षण करना होगा। मैं तत्व की style विशेषता के विरुद्ध रेगेक्स परीक्षण का उपयोग करने की अनुशंसा करता हूं।

const status = $(".status")
const rx = /url\(('|")?[\w/:?&%.-]+\1\)/i
$(".img").each((i, { style: { backgroundImage } }) => {
  const hasImage = rx.test(backgroundImage)
  console.log(i, backgroundImage, hasImage)
  status.append($("<li>", {
    text: hasImage ? "Image is set" : "No image set"
  }))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="status"></ol>

<div class="img"></div>
<div class="img" style="background-image: url('')"></div>
<div class="img" style="background-image: url('https://uploads-ssl.webflow.com/59de7f3f07bb6700016482bc/5ed2bfa63643bc3cf3cf2b5c_files-and-folders.svg')"></div>

0

Phil 22 जिंदा 2021, 07:23

अगर मैं आपके कोड का उपयोग करके तत्व पर एक यूआरएल सेट करता हूं तो उसे कोई छवि नहीं मिलती है

–

Kyle Underhill

22 जिंदा 2021, 06:59

मैंने कई परीक्षण किए और वे सभी मेरे लिए पास हुए। क्या आप उस मूल्य का उदाहरण दे सकते हैं जिसे आप सेट कर रहे हैं?

–

Phil

22 जिंदा 2021, 07:04

बैकग्राउंड-इमेज: url('uploads-ssl.webflow 59de7f3f07bb6700016482bc/…)

–

Kyle Underhill

22 जिंदा 2021, 07:05

आह, मेरा बुरा। \w यूआरएल की हर चीज से मेल नहीं खाता। मैं अपना जवाब ठीक कर दूंगा

–

Phil

22 जिंदा 2021, 07:14

मेरे पास एक फ़ाइल अपलोड फ़ंक्शन है जो एक पीडीएफ का पूर्वावलोकन प्राप्त करता है और इसे एक इनलाइन छवि (पीएनजी) में प्रस्तुत करता है, जो बेस 64 में एन्कोड किया गया है। क्या आपके rx को यह पता लगाने के लिए अपडेट किया जा सकता है कि कोई URL या बेस64 स्ट्रिंग बैकग्राउंड-इमेज url के अंदर है या नहीं? आप कोडपेन से देख सकते हैं कि जब मैं पहली बार एक पीडीएफ अपलोड करता हूं और फिर दूसरे के लिए, पहला उदाहरण रीसेट करता है जैसे कि hasImage सत्य नहीं था। codepen.io/moofawsaw/pen/NWNKzmv

–

Kyle Underhill

23 जिंदा 2021, 06:25

Question 2

.css("background-image", "url") का उपयोग करके बैकग्राउंड-इमेज प्रॉपर्टी को मान पर सेट किया जा रहा है url और jQuery ऑब्जेक्ट संदर्भ लौटाएं जो कभी भी "" के बराबर नहीं होगा।

साथ ही, url('') वास्तव में वर्तमान पृष्ठ URL को संदर्भित करता है, इसलिए jQuery के .css("background-image") का उपयोग करने से दुर्भाग्य से url(http://localhost.com/) जैसी किसी चीज़ का समाधान हो जाएगा।

आपको इसके बजाय मूल्य का निरीक्षण करना होगा। मैं तत्व की style विशेषता के विरुद्ध रेगेक्स परीक्षण का उपयोग करने की अनुशंसा करता हूं।

const status = $(".status")
const rx = /url\(('|")?[\w/:?&%.-]+\1\)/i
$(".img").each((i, { style: { backgroundImage } }) => {
  const hasImage = rx.test(backgroundImage)
  console.log(i, backgroundImage, hasImage)
  status.append($("<li>", {
    text: hasImage ? "Image is set" : "No image set"
  }))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="status"></ol>

<div class="img"></div>
<div class="img" style="background-image: url('')"></div>
<div class="img" style="background-image: url('https://uploads-ssl.webflow.com/59de7f3f07bb6700016482bc/5ed2bfa63643bc3cf3cf2b5c_files-and-folders.svg')"></div>

0

Phil 22 जिंदा 2021, 07:23

अगर मैं आपके कोड का उपयोग करके तत्व पर एक यूआरएल सेट करता हूं तो उसे कोई छवि नहीं मिलती है

–

Kyle Underhill

22 जिंदा 2021, 06:59

मैंने कई परीक्षण किए और वे सभी मेरे लिए पास हुए। क्या आप उस मूल्य का उदाहरण दे सकते हैं जिसे आप सेट कर रहे हैं?

–

Phil

22 जिंदा 2021, 07:04

बैकग्राउंड-इमेज: url('uploads-ssl.webflow 59de7f3f07bb6700016482bc/…)

–

Kyle Underhill

22 जिंदा 2021, 07:05

आह, मेरा बुरा। \w यूआरएल की हर चीज से मेल नहीं खाता। मैं अपना जवाब ठीक कर दूंगा

–

Phil

22 जिंदा 2021, 07:14

मेरे पास एक फ़ाइल अपलोड फ़ंक्शन है जो एक पीडीएफ का पूर्वावलोकन प्राप्त करता है और इसे एक इनलाइन छवि (पीएनजी) में प्रस्तुत करता है, जो बेस 64 में एन्कोड किया गया है। क्या आपके rx को यह पता लगाने के लिए अपडेट किया जा सकता है कि कोई URL या बेस64 स्ट्रिंग बैकग्राउंड-इमेज url के अंदर है या नहीं? आप कोडपेन से देख सकते हैं कि जब मैं पहली बार एक पीडीएफ अपलोड करता हूं और फिर दूसरे के लिए, पहला उदाहरण रीसेट करता है जैसे कि hasImage सत्य नहीं था। codepen.io/moofawsaw/pen/NWNKzmv

–

Kyle Underhill

23 जिंदा 2021, 06:25

jQuery - पता लगाएँ कि क्या पृष्ठभूमि-छवि url HTML से सेट है

1 उत्तर

संबंधित सवाल

नए सवाल