jQuery在Firefox和IE 11中效果不佳 [英] jQuery not working well in firefox and IE 11

问题描述

这里的代码链接： jsfiddle演示

HTML代码：

 < div class =first> 
<！ - 第一部分 - > 
< div class =acord_col> 
< div class =img_classid =exist_site>< / div> 
< div class =intro_text> 
< / div> 
< / div> 
< / div> 
 
< div class ='total_cost'> 
< h1>您的总成本为：$< 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'
}）
}）

//改变检测值的状态
var boolean_next = parseInt（jQuery（'。 boolean_goNext'）文本（））。
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）;

//改变检测值的状态
var boolean_next = parseInt（jQuery（'。boolean_goNext'）。text（））;
boolean_next + = 1;
jQuery（'。boolean_goNext'）。empty（）。append（boolean_next）;


$ b））
}）

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

问题是在谷歌浏览器中工作正常。但不是在Firefox和IE11。

单击循环时，应增加成本，再次单击它应取消选择循环并减去相同的成本。这一切工作正常在铬。但是，为什么在Firefox和IE11的成本不断增加，无论我点击多少次？ 解决方案

.css（）jQuery doc ：

无法保证检索速记CSS属性（例如，边距，背景，
边框），尽管在某些浏览器中有效。

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

  var bg = jQuery（this）.css（'background-image'）; 
  

更新小提琴

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?

解决方案

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

Retrieval of shorthand CSS properties (e.g., 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

这篇关于jQuery在Firefox和IE 11中效果不佳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！