jQuery 在 Firefox 和 IE 11 中无法正常运行答案

【问题标题】：jQuery not working well in firefox and IE 11jQuery 在 Firefox 和 IE 11 中无法正常运行
【发布时间】：2014-06-23 12:51:32
【问题描述】：

这里是代码链接：jsfiddle demo

HTML 代码：

<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 编写价格系统。

问题是它在谷歌浏览器中运行良好。但在 Firefox 和 IE11 中没有。

当我点击循环时，它应该增加成本，再次点击它应该取消选择循环并减去相同的成本。在 chrome 中一切正常。但是为什么在firefox和IE11中，无论我点击多少次，成本都在增加？

【问题讨论】：

可能应该读取background-image 属性，而不是组合的background 属性。看起来每一次点击都会添加一个额外的 .hover() 事件处理程序，这不是你想要的。

标签： javascript jquery html css firefox

【解决方案1】：

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

检索速记 CSS 属性（例如，边距、背景、边框），虽然在某些浏览器上可以正常工作，但不能保证。

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

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

Updated Fiddle

【讨论】：

没有。只需阅读background-image 属性。完全没有理由涉及background 属性。
@jfriend00 以为它会在 Chrome 中有所作为，但猜想它毕竟没有。感谢指出，已更新。
@Rocky 鼠标离开后第二次点击yes图像后图像似乎消失了
@Lekshmi 这是因为一旦刻度标记图像来了，他将其更改为hover上的另一个图像（找不到），尽管这是一种低效的绑定方式在执行相同的作业时多次将元素添加到悬停方法。