Question

此处的代码链接：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);

            }

        })
})

我实际上是使用jquery编写价格系统。

问题是它在Google Chrome中运行良好。但不是在Firefox和IE11中。

当我点击循环时，它应该增加成本，然后再次单击它应该取消选择循环并减去相同的成本。这一切都很好用铬。但是为什么在firefox和IE11中，无论我点击多少次，成本都会不断增加？

Answer 1

如果您阅读 .css() jQuery doc ，则说：

检索速记CSS属性（例如，边距，背景，虽然可以使用某些浏览器，但是不能保证边框）。

我们可以做的是，检查background-image属性。

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

<强> Updated Fiddle

jQuery在firefox和IE 11中运行不佳

1 个答案: