JQuery का उपयोग कर div में x% चौड़ाई कैसे जोड़ें

मेरे पास एक प्रकार का "लोडिंग बार" है जो शुरुआत में 10% चौड़ाई पर है।

<div id="loading_bar"></div>

अब मेरे पास एक फॉर्म भी है ... जिसमें विभिन्न प्रकार के फ़ील्ड हैं ...

प्रत्येक बार जब फॉर्म सबमिट किया जाता है तो मुझे चौड़ाई जोड़ने की आवश्यकता होती है, + 10%, + 20%

मैंने यह कोड लिखा लेकिन यह मुझे पर्सेंट के बजाय पिक्सल देता है ...

$("#loading_bar").css("width", "+=20");

मैं 20px के बजाय ADDS 20% लिख सकता हूं ..?

The value is not a constant one, it will change each time. So each time I need to increase the width according to the specified value.
Can somebody please help... Thank you

0
ब्रह्मांड की गोंद का प्रयोग करें। गणित।
जोड़ा लेखक Ian Brindley, स्रोत

4 उत्तर

कुछ इस तरह।

function increasePercentage($element, percentage) {

    $element.css("width", "+="+(Math.round($element.parent().width() * (percentage/100))));

}

increasePercentage($("#loading_bar"), 20);
1
जोड़ा

आपको युक्त तत्व की चौड़ाई का 20% जोड़ना होगा, और इसकी गणना करना चाहिए। आपके एचटीएमएल संरचना के आधार पर निम्नलिखित फ़ंक्शन काम करना चाहिए:

var newWidth = $('#loading_bar').parent().width();
$("#loading_bar").css("width", "+="+(Math.round(newWidth * 0.2)));

यहां, <�कोड> 0.2 </कोड> 20% का प्रतिनिधित्व करता है। आप आसानी से 20/100 का उपयोग कर प्रतिशत मान को स्पष्ट रूप से सेट कर सकते हैं।

0
जोड़ा
यह चौड़ाई में पीएक्स भी जोड़ रहा है
जोड़ा लेखक Sonycv, स्रोत
 $("#loading_bar").css("width", +=20+"%");
0
जोड़ा

आप उस लोड किए गए मान को कुछ विशेषताओं जैसे रिले में स्टोर कर सकते हैं।

var loaded = $('#loading_bar').attr('rel');
var width = loaded + 20;
$("#loading_bar").css('width', width+'%');
$('#loading_bar').attr('rel',width);
0
जोड़ा
rel <div> तत्वों के लिए मान्य विशेषता नहीं है। डेटा - विशेषताओं के उपयोग की अनुशंसा करना बेहतर होगा।
जोड़ा लेखक BenM, स्रोत
कृपया इसे और स्पष्ट करें
जोड़ा लेखक Sonycv, स्रोत
#loading_bar तत्व में विशेषता जोड़ें। पूर्व <div डेटा-चौड़ाई = "20" आईडी = "loading_bar"> और जब आप चौड़ाई बदलना चाहते हैं तो आप डेटा-चौड़ाई विशेषता से चौड़ाई प्राप्त कर सकते हैं। पूर्व $ ('# loading_bar')। attr ('डेटा-चौड़ाई')। चौड़ाई जोड़ने के बाद आपको डेटा-चौड़ाई विशेषता भी अपडेट करनी होगी
जोड़ा लेखक Shaik Rilwan, स्रोत
क्योंकि बेनम ने कहा कि रिले विशेषता का उपयोग न करें। कृपया डेटा-चौड़ाई विशेषता का उपयोग करें। धन्यवाद बेनम
जोड़ा लेखक Shaik Rilwan, स्रोत