0

我在下面的代码中遇到了一些 IE 问题：

var energia = $(".energia").html().replace("%", "");
var guias = $(".guias").html().replace("%", "");
var pavim = $(".pavim").html().replace("%", "");
var rede_a = $(".rede_agua").html().replace("%", "");
var rede_d = $(".rede_drena").html().replace("%", "");
var total = $(".total").html().replace("%", "");

$('div.progresso').css({ backgroundPosition: "0px 85px" });
$('div.progresso').bind('mouseover', function() {
    var fclass = $(this).attr("class");
    switch (fclass) {
        case (fclass = "progresso energia"):
            $(this).stop().animate({ backgroundPosition: "(0px " + energia + "px)" }, { duration: 500 });
            break;
        case (fclass = "progresso guias"):
            $(this).stop().animate({ backgroundPosition: "(0px " + guias + "px)" }, { duration: 500 });
            break;
        case (fclass = "progresso pavim"):
            $(this).stop().animate({ backgroundPosition: "(0px " + pavim + "px)" }, { duration: 500 });
            break;
        case (fclass = "progresso rede_agua"):
            $(this).stop().animate({ backgroundPosition: "(0px " + rede_a + "px)" }, { duration: 500 });
            break;
        case (fclass = "progresso rede_drena"):
            $(this).stop().animate({ backgroundPosition: "(0px " + rede_d + "px)" }, { duration: 500 });
            break;
        default:
            fclass = null;
            break;
    }
});

这里是 HTML：

<div class="ball ball_energia grande bold"><div class="progresso energia">10%</div></div>
    <div class="ball ball_guias grande bold"><div class="progresso guias">10%</div></div>
    <div class="ball ball_pavim grande bold"><div class="progresso pavim">30%</div></div>
    <div class="ball ball_rede_agua grande bold"><div class="progresso rede_agua">90%</div></div>
    <div class="ball ball_rede_drena grande bold"><div class="progresso rede_drena">80%</div></div>
    <div class="ball_maior grande2 bold"><div class="progresso_maior total">50%</div></div>

该函数必须在其各自的 div 中捕获每个数字并对待自己执行我调用的函数，该函数必须将每个 div 与其数字分开并为它们分别更改背景的位置。

在 chrome 和 firefox 中，该功能运行良好，但在 IE 中，它不起作用并且它作为单个数字运行.. 我哪里错了？

4

1 回答 1

0

这是 HTML5 数据属性的一个很好的用例。jQuery 已经对这些值提供了支持，因此您也可以使用较旧的用户代理。

你最终得到的是更清晰的代码：

HTML 标记

<div class="ball ball_energia grande bold">
    <div data-position="energia" data-position-value="10%" class="progresso">
        10%
    </div>
</div>

注意data-position-value我放在元素上的属性。我还包含了一个data-postition属性，但我们不会在示例中使用它，因为现在switch根本不需要 。

Javascript

$('div.progresso').bind('mouseover', function() {
    var value= $(this).data("position-value");
    $(this).stop().animate({ backgroundPosition: "(0px " + value + "px)" }, { duration: 500 });

    // for testing, output the value being used
    $('#display').html(value);
});

在此代码块中，我们使用该data()方法从元素中提取所需的值。然后，我们可以使用通用的脚本行将背景更改为所需的位置。

看看它在行动：http: //jsfiddle.net/Mrra3/

文档

于 2012-06-27T14:38:48.867 回答