Check out the code here: jsfiddle demo
HTML CODE:
<div class="first">
<!-- Part one -->
<div class="acord_col">
<div class="img_class" id="exist_site"></div>
<div class="intro_text">
</div>
</div>
</div>
<div class='total_cost'>
<h1>Your Total Cost is: $<span class="cost_number">0</span><span class="cost_per_page no_display"> + 50/Page</span></h1>
</div>
Javascript
jQuery(document).ready(function() {
var total_price = 0;
jQuery("#exist_site").click(function() {
var bg = jQuery(this).css('background');
var check_string = 'yes.png';
if (bg.indexOf(check_string) > -1) {
jQuery(this).css({
'background': 'url("http://www.itechinstant.com/wp-content/uploads/2014/06/home.png")',
'background-size': 'cover'
})
total_price -= 200;
jQuery('.cost_number').empty().append(total_price);
jQuery("#exist_site").hover(function() {
jQuery(this).css({
'background': 'url("http://www.itechinstant.com/wp-content/uploads/2014/06/home_h.png)',
'background-size' : 'cover'
})
})
// Change the status of detected value
var boolean_next = parseInt(jQuery('.boolean_goNext').text());
boolean_next -= 1;
jQuery('.boolean_goNext').empty().append(boolean_next);
} else {
jQuery(this).css({
'background': 'url("http://www.itechinstant.com/wp-content/uploads/2014/06/yes.png")',
'background-size': 'cover'
})
total_price += 200;
jQuery('.cost_number').empty().append(total_price);
// Change the status of detected value
var boolean_next = parseInt(jQuery('.boolean_goNext').text());
boolean_next += 1;
jQuery('.boolean_goNext').empty().append(boolean_next);
}
})
})
I was working on a pricing system using jquery.
The issue I'm facing is that it works perfectly in Google Chrome, but not in Firefox and IE11.
When I click the cycle, it should increase the cost, and clicking again should deselect the cycle and decrease the same cost. Everything works as expected in chrome. But for some reason in Firefox and IE11, the cost keeps increasing regardless of how many times I click. Any ideas why this might be happening?