यहाँ मेरा कोड है ...
<div id="estimate">
<div class="form-group">
<div class="range-slider">
<input class="range-slider__range form-control prc e-range" type="range" value="100" min="0" max="500" pst="3">
<span class="range-slider__value">0</span>
</div>
</div>
<div class="form-group">
<div class="range-slider">
<input class="range-slider__range form-control prc e-range" type="range" value="100" min="0" max="500" pst="5">
<span class="range-slider__value">0</span>
</div>
</div>
<div class="form-group">
<input type="number" class="form-control prc" value="{{vl}}"/>
</div>
<div class="form-group">
<input type="number" class="form-control prc" value="5"/>
</div>
<div class="form-group">
<input type="checkbox" value="10" class="form-control prc">
</div>
<p id="result"></p>
</div>
<script>
estimate();
$('.form-group').on('change','.prc',estimate);
function estimate(){
let totalSum = 0;
$('.form-group .prc').each(function(){
if(this.type=="checkbox" && !this.checked) return
let inputVal = $(this).val();
if($.isNumeric(inputVal)){
totalSum += parseFloat(inputVal);
}
});
$('#result').html(totalSum);
}
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function(){
$(this).next(value).html(this.value);
});
});
};
rangeSlider();
</script>
यहां मैं चाहता हूं कि रेंज स्लाइडर केवल पीएसटी विशेषता के साथ मूल्य गुणा करें और फिर अन्य क्षेत्रों के साथ गणना करें और फिर इसका परिणाम दिखाएं .. यहां प्रत्येक आइटम के लिए किसी विशिष्ट आईडी का उपयोग नहीं किया जा सकता है ... केवल उसी प्रकार के इनपुट के साथ किसी भी विशिष्ट वर्ग द्वारा कॉल किया जा सकता है क्षेत्र की तरह रेंज। और प्रत्येक श्रेणी vlue को प्रत्येक pst मान से गुणा करना चाहिए और फिर अन्य क्षेत्रों के साथ कैलकुलेट करना चाहिए
-1
Aminul hasan
18 जिंदा 2021, 09:26
1 उत्तर
सबसे बढ़िया उत्तर
निम्नलिखित उदाहरण पर विचार करें।
estimate();
$('.form-group').on('change', '.prc', estimate);
function estimate() {
var totalSum = 0,
add, v, m;
$('.form-group .prc').each(function(i, el) {
if ($(el).is(":checkbox") && !$(el).is(":checked")) {
add = 0;
} else if ($(el).hasClass("e-range")) {
v = parseInt($(el).val());
m = parseInt($(el).attr("pst"));
add = (v * m);
} else {
add = parseFloat($(el).val());
}
totalSum += add;
});
$('#result').html(totalSum);
}
function rangeSlider() {
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function() {
value.each(function() {
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function() {
$(this).next(value).html(this.value);
});
});
};
rangeSlider();
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<div id="estimate">
<div class="form-group">
<div class="range-slider">
<input class="range-slider__range form-control prc e-range" type="range" value="100" min="0" max="500" pst="3">
<span class="range-slider__value">0</span>
</div>
</div>
<div class="form-group">
<div class="range-slider">
<input class="range-slider__range form-control prc e-range" type="range" value="100" min="0" max="500" pst="5">
<span class="range-slider__value">0</span>
</div>
</div>
<div class="form-group">
<input type="number" class="form-control prc" value="0" />
</div>
<div class="form-group">
<input type="number" class="form-control prc" value="5" />
</div>
<div class="form-group form-check">
<input type="checkbox" value="10" class="form-check-input form-control prc"> <label class="form-check-label">10</label>
</div>
<p id="result"></p>
</div>
यदि आपको किसी तत्व की विशेषता प्राप्त करने की आवश्यकता है, तो .attr()
का उपयोग करें।
और देखें:
0
Twisty
18 जिंदा 2021, 18:53
इस कोड में केवल समस्या चेकबॉक्स है .. अगर मैंने चेक नहीं किया है तो यह कैलकुलेटिंग है जो कि अगर मैंने चेक किया है तो उसे उस मान को जोड़ना चाहिए
– Aminul hasan
18 जिंदा 2021, 12:56
लेकिन इसका पहला कंडीशन बदलने के बाद हल हो गया ( this.type=="checkbox" && !this.checked )
– Aminul hasan
18 जिंदा 2021, 13:59
pst
विशेषता से आपका क्या मतलब है। क्या आपका मतलबprc
है?.attr()
का प्रयोग करेंगे। आप यह गणना कहाँ से प्राप्त करना चाहेंगे?