jQuery not working well in firefox and IE 11

Question

Here's code link: 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 actually coding a price system using jquery.

The question is it works fine in google chrome. But not in firefox and IE11.

When I click the cycle, it should increase the cost, and click again it should deselect the cycle and minus the same cost. It all works fine in chrome. But why in firefox and IE11 the cost keep increasing no matter how many times I click?

Answer 1

If you read the .css() jQuery doc it says:

Retrieval of shorthand CSS properties (eg, margin, background, border), although functional with some browsers, is not guaranteed.

What we could do is, check for the background-image property.

var bg = jQuery(this).css('background-image');

Updated Fiddle