I have this jQuery code here and its working fine, calculations are ok, the only issue here is that when I click the plus or minus sign it changes all, I have applied the .each() function but I think my coding is wrong or not in the right place, my code is below but I have this fiddle https://jsfiddle.net/Loktfa2b/ also for you guys to see the actual running script. Thank you guys for the help in advance :-)
Here are my codes
<div role="main" style="display:flex;">
<div id="mysliders">
<div >
<div><div for="slider-1">Testing 1</div></div>
<div>
<label for="slider-1"> <span ></span></label>
<div>
<div>
<button id="minus">-</button>
<input type="range" name="slider-1" id="slider-1" min="0.10" max="50" step="0.10" value="1" />
<button id="plus"> </button>
</div>
<div>$<div id="slider-1-total"></div></div>
</div>
</div>
</div>
<div >
<div><div for="slider-2">Testing 2</div></div>
<div>
<label for="slider-2"></label>
<div>
<div>
<button id="minus">-</button>
<input type="range" name="slider-2" id="slider-2" min="250" max="50000" step="250" value="1000" />
<button id="plus"> </button>
</div>
<div>$<div id="slider-2-total"></div></div>
</div>
</div>
</div>
<div >
<div><div for="slider-3">Testing 2</div></div>
<div>
<label for="slider-3"></label>
<div>
<div>
<button id="minus">-</button>
<input type="range" name="slider-3" id="slider-3" min="0" max="100" step=".5" value="20" />
<button id="plus"> </button>
</div>
<div><div id="slider-3-total"></div>%</div>
</div>
</div>
</div>
<div >
<div><div for="slider-4">Testing 3</div></div>
<div>
<label for="slider-4"></label>
<div>
<div>
<button id="minus">-</button>
<input type="range" name="slider-4" id="slider-4" min="0" max="100" step=".5" value="40" />
<button id="plus"> </button>
</div>
<div><div id="slider-4-total"></div>%</div>
</div>
</div>
</div>
<div >
<div><div for="slider-5">Testing 4</div></div>
<div>
<label for="slider-5"></label>
<div>
<div>
<button id="minus">-</button>
<input type="range" name="slider-5" id="slider-5" min="0" max="100000" step="100" value="100" />
<button id="plus"> </button>
</div>
<div>$<div id="slider-5-total"></div></div>
</div>
</div>
</div>
</div>
<div >
<div>
<div ><div>Test 1</div><div><strong id="visit"></strong></div></div>
<div ><div>Test 2</div><div><strong id="leads"></strong></div></div>
<div ><div>Test 3</div><div>$<strong id="cpl"></strong></div></div>
<div ><div>Test 4</div><div><strong id="sales"></strong></div></div>
<div ><div>Test 5</div><div>$<strong id="revenue"></strong></div></div>
<div style="font-size:30px;font-weight:bold;"><div>Total</div><div><strong id="total"></strong>%</div></div>
</div>
</div>
</div>
and here is my jQuery
jQuery(document).ready(function(){
jQuery( ".calc-module .add" ).each(function() {
jQuery(this).on("change", function () {
addAll();
});
addAll();
});
});
function addAll() {
var sum = 0
var slider1 = jQuery('.slider1 .add').val(); //visit
var slider2 = jQuery('.slider2 .add').val(); //Leads
var slider3 = jQuery('.slider3 .add').val(); //cpl
var slider4 = jQuery('.slider4 .add').val(); //sales
var slider5 = jQuery('.slider5 .add').val(); //revenue
var slider1_decimal = parseFloat(slider1);
var slider1_decimal_total = slider1_decimal.toFixed(2);
//var monthly_management_fee = 1550;
jQuery('#slider-1-total').html(addCommas(slider1_decimal_total));
jQuery('#slider-2-total').html(addCommas(slider2));
jQuery('#slider-3-total').html(slider3);
jQuery('#slider-4-total').html(slider4);
jQuery('#slider-5-total').html(addCommas(slider5));
var visit_total = parseFloat(slider2) / parseFloat(slider1);
var visit_total_no_decimal = visit_total.toFixed(0);
jQuery('#visit').html(addCommas(visit_total_no_decimal));
var leads_total = (parseFloat(visit_total) * parseFloat(slider3)) / 100;
jQuery('#leads').html(addCommas(leads_total.toFixed(0)));
var clp_total = parseFloat(slider2) / leads_total;
jQuery('#cpl').html(clp_total.toFixed(0));
var sales_total = parseFloat(visit_total) * (parseFloat(slider3)/100) * (parseFloat(slider4)/100);
jQuery('#sales').html(addCommas(sales_total.toFixed(0)));
var revenue_total = parseFloat(sales_total).toFixed(0) * parseFloat(slider5);
jQuery('#revenue').html(addCommas(revenue_total));
var investment = parseFloat(slider2); //3050
var investment_total = ((parseFloat(revenue_total) - investment) / investment) * 100;
jQuery('#total').html(addCommas(investment_total.toFixed(0)));
}
jQuery( ".calc-module" ).each(function() {
jQuery(this).find("#minus").click(function() {
zoom("out");
});
jQuery(this).find("#plus").click(function() {
zoom("in");
});
});
function zoom(direction) {
jQuery( ".calc-module .add" ).each(function() {
var slider1 = jQuery(this).val(); //visit
var slider = jQuery(this);
var step = jQuery(this).attr('step');
if (direction === "out") {
newStepValue = parseFloat(slider1) - parseFloat(step); // working
} else {
newStepValue = parseFloat(slider1) parseFloat(step); // working
}
slider.val(newStepValue).change();
console.log();
});
};
function addCommas(x) {
var parts = x.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3}) (?!\d))/g, ",");
return parts.join(".");
}
CodePudding user response：
I have moved your code to Fiddle and fixed. It is not the best fix but I think it works.
I found there following issues.
- you have had multiple buttons with the same id - it was id="minus" and id="plus". I have changed it into class (so no id="minus" but )
- when you were calling zoom function you didn't pass the context / slider which is being affected - I have fixed it.
To get button parent container I used $(this).parent() and changed zoom call to:
jQuery(this).find(".minus").click(function() {
zoom("out", $(this).parent());
});
- zoom function was not accepting the context / slider container which is being affected. Basically you were querying for every slider container group and change value.
I have changed it to:
function zoom(direction, sliderGroup) {
jQuery( ".add", sliderGroup ).each(function() {
// inner is left the same
})
})
You can see that zoom function have second argument sliderGroup and this argument I am passing to jQuery query as query context (second parameter). This way this jQuery query function will only return all elements with class add in given sliderGroup.
Here you can see the Fiddle after changes https://jsfiddle.net/wo26pgd9/6/
If you have additional questions or this solution is not suitable for you, describe your case so I can suggest a better one.
Best regards Łukasz
PS: I am new here - if I made something wrong please point me that out