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 に答える